Button 按钮

常用的操作按钮

基础用法

使用 type, plain, round 和 circle 来定义按钮的样式。

<template>
    <div :style="{ marginBottom: '1rem' }">
        <mc-button type="default">Default</mc-button>
        <mc-button type="primary">Primary</mc-button>
        <mc-button type="success">Success</mc-button>
        <mc-button type="info">Info</mc-button>
        <mc-button type="warning">Warning</mc-button>
        <mc-button type="danger">Danger</mc-button>
    </div>

    <div :style="{ marginBottom: '1rem' }">
        <mc-button type="default" plain>Default</mc-button>
        <mc-button type="primary" plain>Primary</mc-button>
        <mc-button type="success" plain>Success</mc-button>
        <mc-button type="info" plain>Info</mc-button>
        <mc-button type="warning" plain>Warning</mc-button>
        <mc-button type="danger" plain>Danger</mc-button>
    </div>

    <div :style="{ marginBottom: '1rem' }">
        <mc-button round type="default">Round</mc-button>
        <mc-button round type="primary">Primary</mc-button>
        <mc-button round type="success">Success</mc-button>
        <mc-button round type="info">Info</mc-button>
        <mc-button round type="warning">Warning</mc-button>
        <mc-button round type="danger">Danger</mc-button>
    </div>

    <div>
        <mc-button circle type="default">
            <template #icon>
                <AddCircle />
            </template>
        </mc-button>
        <mc-button circle type="primary">
            <template #icon>
                <AddCircle />
            </template>
        </mc-button>
        <mc-button circle type="success">
            <template #icon>
                <AddCircle />
            </template>
        </mc-button>
        <mc-button circle type="info">
            <template #icon>
                <AddCircle />
            </template>
        </mc-button>
        <mc-button circle type="warning">
            <template #icon>
                <AddCircle />
            </template>
        </mc-button>
        <mc-button circle type="danger">
            <template #icon>
                <AddCircle />
            </template>
        </mc-button>
    </div>
</template>

<script setup lang="ts">
import { AddCircle } from '@vicons/ionicons5';
</script>

禁用状态

使用 disabled 属性来定义按钮是否被禁用。 该属性接受一个 Boolean 类型的值。

<template>
    <div :style="{ marginBottom: '1rem' }">
        <mc-button disabled>Default</mc-button>
        <mc-button type="primary" disabled>Primary</mc-button>
        <mc-button type="success" disabled>Success</mc-button>
        <mc-button type="info" disabled>Info</mc-button>
        <mc-button type="warning" disabled>Warning</mc-button>
        <mc-button type="danger" disabled>Danger</mc-button>
    </div>

    <div>
        <mc-button plain disabled>Plain</mc-button>
        <mc-button type="primary" plain disabled>Primary</mc-button>
        <mc-button type="success" plain disabled>Success</mc-button>
        <mc-button type="info" plain disabled>Info</mc-button>
        <mc-button type="warning" plain disabled>Warning</mc-button>
        <mc-button type="danger" plain disabled>Danger</mc-button>
    </div>
</template>

图标按钮

使用 icon 插槽来为按钮添加图标。

<template>
    <div>
        <mc-button type="primary">
            <template #icon>
                <AddCircle></AddCircle>
            </template>
        </mc-button>
        <mc-button type="primary">
            <template #icon>
                <AddCircle></AddCircle>
            </template>
        </mc-button>
        <mc-button type="primary">
            <template #icon>
                <AddCircle></AddCircle>
            </template>
        </mc-button>
        <mc-button type="primary">
            Add
            <template #icon>
                <AddCircle></AddCircle>
            </template>
        </mc-button>
        <mc-button type="primary" icon-placement="right">
            Add
            <template #icon>
                <AddCircle></AddCircle>
            </template>
        </mc-button>
    </div>
</template>

<script setup lang="ts">
import { AddCircle } from '@vicons/ionicons5';
</script>

加载状态按钮

使用 loading 属性来显示加载中状态。

<template>
    <mc-button type="primary" loading>Loading</mc-button>
    <mc-button type="primary" loading>
        Loading
        <template #loading>
            <Refresh class="reload" />
        </template>
    </mc-button>
    <mc-button type="primary" loading>
        Loading
        <template #loading>
            <div class="custom-loading">
                <svg class="circular">
                    <circle class="circle" cx="8" cy="8" r="7"></circle>
                </svg>
            </div>
        </template>
    </mc-button>
</template>

<script lang="ts" setup>
import { Refresh } from '@vicons/ionicons5';
</script>

<style scoped>
.reload {
    width: 16px;
    height: 16px;
    margin-right: 3px;
    animation: loading-rotate 1s linear infinite;
    transform-origin: 50% 59.76%;
}

.mc-button .custom-loading .circular {
    width: 16px;
    height: 16px;
    fill: none;
    margin-right: 6px;
    animation: loading-rotate 2s linear infinite;
}
.mc-button .custom-loading .circular .circle {
    stroke-dasharray: 44, 44;
    stroke-dashoffset: 0;
    stroke-width: 1;
    stroke: var(--mc-button-text-color);
    stroke-linecap: round;
    animation: loading-dash 2s linear infinite;
}
@keyframes loading-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes loading-dash {
    0% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: -44px;
    }
    100% {
        stroke-dashoffset: -88px;
    }
}
</style>

调整尺寸

使用 size 属性配置按钮尺寸。

<template>
    <div :style="{ marginBottom: '1rem' }">
        <mc-button size="large">Large</mc-button>
        <mc-button>Default</mc-button>
        <mc-button size="small">Small</mc-button>
        <mc-button size="large">
            <template #icon>
                <Search />
            </template>
            Search
        </mc-button>
        <mc-button>
            <template #icon>
                <Search />
            </template>
            Search
        </mc-button>
        <mc-button size="small">
            <template #icon>
                <Search />
            </template>
            Search
        </mc-button>
    </div>
    <div :style="{ marginBottom: '1rem' }">
        <mc-button size="large" round>Large</mc-button>
        <mc-button round>Default</mc-button>
        <mc-button size="small" round>Small</mc-button>
        <mc-button size="large" round>
            <template #icon>
                <Search />
            </template>
            Search
        </mc-button>
        <mc-button round>
            <template #icon>
                <Search />
            </template>
            Search
        </mc-button>
        <mc-button size="small" round>
            <template #icon>
                <Search />
            </template>
            Search
        </mc-button>
    </div>
    <div>
        <mc-button size="large" circle>
            <template #icon>
                <Search />
            </template>
        </mc-button>
        <mc-button circle>
            <template #icon>
                <Search />
            </template>
        </mc-button>
        <mc-button size="small" circle>
            <template #icon>
                <Search />
            </template>
        </mc-button>
    </div>
</template>

<script setup lang="ts">
import { Search } from '@vicons/ionicons5';
</script>

API

Attributes

属性名	说明	类型	默认值
size	按钮大小	'large' | 'default' | 'small'	—
type	按钮类型	'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | ''	—
plain	是否为朴素按钮	boolean	false
round	是否为圆角按钮	boolean	false
circle	是否为圆形按钮	boolean	false
loading	是否为加载中状态 loading	boolean	false
disabled	是否为禁用状态	boolean	false
native-type	原生 type 属性	'button' | 'submit' | 'reset'	button
iconPlacement	图标位置	'left' | 'right'	left

Events

支持原生 button 的所有事件

Slots

插槽名	说明
default	自定义默认内容
loading	自定义加载中组件
icon	自定义图标组件