Skip to content

Button 按钮

常用的操作按钮。

基础用法

使用 typeplainroundcircle 来定义按钮的样式。

<script setup>
import Button from '@/components/Button/Button.vue';
import Icon from '@/components/Icon/Icon.vue';
</script>
<template>
    <div class="basic block">
        <Button> hello </Button>
        <Button type="primary"> Primary </Button>
        <Button type="success"> Success </Button>
        <Button type="warning"> Warning </Button>
        <Button type="danger"> Danger </Button>
        <Button type="info"> Info </Button>
    </div>

    <div class="plain block">
        <Button plain> hello </Button>
        <Button type="primary" plain> Primary </Button>
        <Button type="success" plain> Success </Button>
        <Button type="warning" plain> Warning </Button>
        <Button type="danger" plain> Danger </Button>
        <Button type="info" plain> Info </Button>
    </div>

    <div class="round block">
        <Button round> hello </Button>
        <Button type="primary" round> Primary </Button>
        <Button type="success" round> Success </Button>
        <Button type="warning" round> Warning </Button>
        <Button type="danger" round> Danger </Button>
        <Button type="info" round> Info </Button>
    </div>

    <div class="circle block">
        <Button circle>
            <Icon icon="star" />
        </Button>
        <Button type="primary" circle>
            <Icon icon="star" />
        </Button>
        <Button type="success" circle>
            <Icon icon="star" />
        </Button>
        <Button type="warning" circle>
            <Icon icon="star" />
        </Button>
        <Button type="danger" circle>
            <Icon icon="star" />
        </Button>
        <Button type="info" circle>
            <Icon icon="star" />
        </Button>
    </div>
</template>
<style>
.block {
    margin-bottom: 10px;
}
</style>

禁用状态

使用 disabled 属性来定义按钮是否被禁用

<script setup>
import Button from '@/components/Button/Button.vue';
</script>
<template>
    <div class="disabled block">
        <Button disabled> hello </Button>
        <Button type="primary" disabled> Primary </Button>
        <Button type="success" disabled> Success </Button>
        <Button type="warning" disabled> Warning </Button>
        <Button type="danger" disabled> Danger </Button>
        <Button type="info" disabled> Info </Button>
    </div>

    <div class="disabled-plain block">
        <Button plain disabled> hello </Button>
        <Button type="primary" plain disabled> Primary </Button>
        <Button type="success" plain disabled> Success </Button>
        <Button type="warning" plain disabled> Warning </Button>
        <Button type="danger" plain disabled> Danger </Button>
        <Button type="info" plain disabled> Info </Button>
    </div>
</template>

图标按钮

使用 icon 属性来为按钮添加图标。图标名称请看 fontawesome 官网 https://fontawesome.com/icons

<script setup>
import Button from '@/components/Button/Button.vue';
</script>
<template>
    <div class="icon block">
        <Button icon="star"> Star Button </Button>
    </div>
</template>

加载状态按钮

通过设置 loading 属性为 true 来显示正在加载的状态。

<script setup>
import Button from '@/components/Button/Button.vue';
</script>
<template>
    <div class="loading block">
        <Button loading> Loading... </Button>
    </div>
</template>

不同大小的按钮

通过设置 size 属性为 small | large 来调整图标的大小。

<script setup>
import Button from '@/components/Button/Button.vue';
</script>
<template>
    <div class="size block">
        <Button size="large"> Large </Button>
        <Button type="primary"> 普通 </Button>
        <Button type="success" size="small"> Small </Button>
    </div>
</template>

Button 属性

NameDescriptionTypeDefault
sizebutton sizeenum - 'large'| 'small'
typebutton typeenum - 'primary'| 'success'| 'warning'| 'danger'| 'info'
plaindetermine whether it's a plain buttonbooleanfalse
rounddetermine whether it's a round buttonbooleanfalse
circledetermine whether it's a circle buttonbooleanfalse
loadingdetermine whether it's loadingbooleanfalse
disableddisable the buttonbooleanfalse
iconicon componentstring
autofocussame as native button's autofocusbooleanfalse
native-typesame as native button's typeenum - 'button'| 'submit'| 'reset'button