Button 按钮
常用的操作按钮。
基础用法
使用 type
、plain
、round
和 circle
来定义按钮的样式。
<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" disabled plain > 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 Attributes
Name | Description | Type | Default |
---|---|---|---|
size | button size | enum - 'large'| 'small' | — |
type | button type | enum - 'primary'| 'success'| 'warning'| 'danger'| 'info' | — |
plain | determine whether it's a plain button | boolean | false |
round | determine whether it's a round button | boolean | false |
circle | determine whether it's a circle button | boolean | false |
loading | determine whether it's loading | boolean | false |
disabled | disable the button | boolean | false |
icon | icon component | string | — |
autofocus | same as native button's autofocus | boolean | false |
native-type | same as native button's type | enum - 'button'| 'submit'| 'reset' | button |