Button 按钮

常用的操作按钮.

基础用法

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

<script setup>
import Button from '../../../src/components/Button/Button.vue'
</script>

<template>
  <div>
    <Button>Default</Button>
    <Button type="primary">Primary</Button>
    <Button type="success">Success</Button>
    <Button type="info">Info</Button>
    <Button type="warning">Warning</Button>
    <Button type="danger">Danger</Button>
  </div>

  <div class="mt-20">
    <Button plain>Plain</Button>
    <Button type="primary" plain>Primary</Button>
    <Button type="success" plain> Success</Button>
    <Button type="info" plain>Info</Button>
    <Button type="warning" plain>Warning</Button>
    <Button type="danger" plain>Danger</Button>
  </div>

  <div class="mt-20">
    <Button round>Round</Button>
    <Button type="primary" round>Primary</Button>
    <Button type="success" round> Success</Button>
    <Button type="info" round>Info</Button>
    <Button type="warning" round>Warning</Button>
    <Button type="danger" round>Danger</Button>
  </div>

  <div class="mt-20">
    <Button circle>☀️</Button>
    <Button type="primary" circle>☀️</Button>
    <Button type="success" circle> ☀️</Button>
    <Button type="info" circle>☀️</Button>
    <Button type="warning" circle>☀️</Button>
    <Button type="danger" circle>☀️</Button>
  </div>
</template>
<style scoped>
.mt-20 {
  margin-top: 20px;
}
</style>

禁用状态

你可以使用 disabled 属性来定义按钮是否被禁用.

使用 disabled 属性来控制按钮是否为禁用状态,该属性接受一个 Boolean 类型的值.

<script setup>
import Button from '../../../src/components/Button/Button.vue'
</script>

<template>
  <div>
    <Button disabled>Default</Button>
    <Button disabled type="primary">Primary</Button>
    <Button disabled type="success">Success</Button>
    <Button disabled type="info">Info</Button>
    <Button disabled type="warning">Warning</Button>
    <Button disabled type="danger">Danger</Button>
  </div>

  <div class="mt-20">
    <Button plain disabled>Plain</Button>
    <Button type="primary" plain disabled>Primary</Button>
    <Button type="success" plain disabled> Success</Button>
    <Button type="info" plain disabled>Info</Button>
    <Button type="warning" plain disabled>Warning</Button>
    <Button type="danger" plain disabled>Danger</Button>
  </div>

  <div class="mt-20">
    <Button round disabled>Round</Button>
    <Button type="primary" round disabled>Primary</Button>
    <Button type="success" round disabled> Success</Button>
    <Button type="info" round disabled>Info</Button>
    <Button type="warning" round disabled>Warning</Button>
    <Button type="danger" round disabled>Danger</Button>
  </div>

  <div class="mt-20">
    <Button circle disabled>☀️</Button>
    <Button type="primary" circle disabled>☀️</Button>
    <Button type="success" circle disabled> ☀️</Button>
    <Button type="info" circle disabled>☀️</Button>
    <Button type="warning" circle disabled>☀️</Button>
    <Button type="danger" circle disabled>☀️</Button>
  </div>
</template>

<style scoped>
.mt-20 {
  margin-top: 20px;
}
</style>

调整尺寸

除了默认的大小,按钮组件还提供了几种额外的尺寸可供选择,以便适配不同的场景.

使用 size 属性额外配置尺寸,可使用 large 和 small 两种值.

<script setup>
import Button from '../../../src/components/Button/Button.vue'
</script>

<template>
  <div>
    <Button>Default</Button>
    <Button size="large">Large</Button>
    <Button size="small">Small</Button>
  </div>
</template>

加载状态

点击按钮来加载数据,并向用户反馈加载状态.

通过设置loading属性为true来显示加载中状态.

<script setup>
import Button from '../../../src/components/Button/Button.vue'
</script>

<template>
  <div>
    <Button size="large" loading>Loading</Button>
    <Button size="small" loading>Loading</Button>
  </div>
</template>

图标按钮

使用图标为按钮添加更多的含义,你也可以单独使用图标不添加文字来节省显示区域占用.

使用icon属性来为按钮添加图标.您可以在我们的fortawesome图标库中找到所需图标.通过向右方添加icon="xxx"的方式来添加图标.

<template>
  <div>
    <Button icon="user-secret">图标按钮</Button>
    <Button icon="heart">图标按钮</Button>
    <Button icon="lock" circle></Button>
  </div>
</template>

<script setup>
import Button from '../../../src/components/Button/Button.vue'
</script>

Button API

Button 属性

Name	Description	Type	Default
size	按钮尺寸	enum - large small	—
type	按钮类型	enum - primary success warning danger info	—
plain	是否为朴素按钮	boolean	false
round	是否为圆角按钮	boolean	false
circle	是否为圆形按钮	boolean	false
loading	是否为加载中状态	boolean	false
disabled	按钮是否为禁用状态	boolean	false
icon	图标组件	string	—
autofocus	原生 autofocus 属性	boolean	false
native-type	原生type属性	enum - button submit reset	button