Button 按钮

常用的操作按钮。

基础用法

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

<template>
  <div class="content">
    <div>
      <mc-button>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>
      <mc-button plain>Plain</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>
      <mc-button round>Round</mc-button>
      <mc-button type="primary" round>Primary</mc-button>
      <mc-button type="success" round>Success</mc-button>
      <mc-button type="info" round>Info</mc-button>
      <mc-button type="warning" round>Warning</mc-button>
      <mc-button type="danger" round>Danger</mc-button>
    </div>

    <div>
      <mc-button icon="magnifying-glass" circle />
      <mc-button type="primary" :icon="['fas', 'pen-to-square']" circle />
      <mc-button type="success" icon="check" circle />
      <mc-button type="info" icon="envelope" circle />
      <mc-button type="warning" icon="star" circle />
      <mc-button type="danger" icon="trash-can" circle />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { library } from '@fortawesome/fontawesome-svg-core'
import {
  faMagnifyingGlass,
  faPenToSquare,
  faCheck,
  faEnvelope,
  faStar,
  faTrashCan
} from '@fortawesome/free-solid-svg-icons'
library.add(faMagnifyingGlass, faPenToSquare, faCheck, faEnvelope, faStar, faTrashCan)
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

禁用状态

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

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

<template>
  <div class="content">
    <div>
      <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>
  </div>
</template>
<style scoped>
.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

图标按钮

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

<template>
  <div class="content">
    <div>
      <mc-button icon="magnifying-glass" round>icon</mc-button>
      <mc-button type="primary" :icon="['fas', 'pen-to-square']" round>icon</mc-button>
      <mc-button type="success" icon="check" round>icon</mc-button>
      <mc-button type="info" icon="envelope" round>icon</mc-button>
      <mc-button type="warning" icon="star" round>icon</mc-button>
      <mc-button type="danger" icon="trash-can" round>icon</mc-button>
    </div>
    <div>
      <mc-button icon="magnifying-glass">icon</mc-button>
      <mc-button type="primary" :icon="['fas', 'pen-to-square']">icon</mc-button>
      <mc-button type="success" icon="check">icon</mc-button>
      <mc-button type="info" icon="envelope">icon</mc-button>
      <mc-button type="warning" icon="star">icon</mc-button>
      <mc-button type="danger" icon="trash-can">icon</mc-button>
    </div>
    <div>
      <mc-button icon="magnifying-glass" circle />
      <mc-button type="primary" :icon="['fas', 'pen-to-square']" circle />
      <mc-button type="success" icon="check" circle />
      <mc-button type="info" icon="envelope" circle />
      <mc-button type="warning" icon="star" circle />
      <mc-button type="danger" icon="trash-can" circle />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { library } from '@fortawesome/fontawesome-svg-core'
import {
  faMagnifyingGlass,
  faPenToSquare,
  faCheck,
  faEnvelope,
  faStar,
  faTrashCan
} from '@fortawesome/free-solid-svg-icons'
library.add(faMagnifyingGlass, faPenToSquare, faCheck, faEnvelope, faStar, faTrashCan)
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

加载状态按钮

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

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

<template>
  <mc-button type="primary" loading>Loading</mc-button>
  <mc-button loading round>Loading</mc-button>
  <mc-button type="primary" loading plain>Loading</mc-button>
</template>

调整尺寸

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

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

<template>
  <div class="content">
    <div>
      <mc-button size="large">Large</mc-button>
      <mc-button>Default</mc-button>
      <mc-button size="small">Small</mc-button>
      <mc-button size="large" icon="magnifying-glass">Search</mc-button>
      <mc-button icon="magnifying-glass">Search</mc-button>
      <mc-button size="small" icon="magnifying-glass">Search</mc-button>
    </div>
    <div>
      <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" icon="magnifying-glass" round>Search</mc-button>
      <mc-button icon="magnifying-glass" round>Search</mc-button>
      <mc-button size="small" icon="magnifying-glass" round>Search</mc-button>
    </div>
    <div>
      <mc-button icon="magnifying-glass" size="large" circle />
      <mc-button icon="magnifying-glass" circle />
      <mc-button icon="magnifying-glass" size="small" circle />
    </div>
  </div>
</template>

<script setup lang="ts">
import { library } from '@fortawesome/fontawesome-svg-core'
import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
library.add(faMagnifyingGlass)
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

Button API

Button 属性

属性名	说明	类型	默认值
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	icon component	string	—
autofocus	原生 autofocus 属性	boolean	false
native-type	原生 type 属性	enum - 'button'| 'submit'| 'reset'	button

Button 插槽

插槽名	说明
default	自定义默认内容

Button 方法

属性名	说明	类型
ref	按钮 html 元素	Ref<HTMLButtonElement>