Button按钮 - 图1

Button 按钮

按钮用于开始一个即时操作。

何时使用

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

在 Ant Design Vue 中我们提供了五种按钮。

  • 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
  • 默认按钮：用于没有主次之分的一组行动点。
  • 虚线按钮：常用于添加操作。
  • 文本按钮：用于最次级的行动点。
  • 链接按钮：用于作为外链的行动点。

以及四种状态属性与上面配合使用。

  • 危险：删除/移动/修改权限等危险操作，一般需要二次确认。
  • 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
  • 禁用：行动点不可用的时候，一般需要文案解释。
  • 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。

代码演示

PrimaryDefaultDashedDanger按钮按 钮Link

按钮类型

按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。

  1. <template>
  2.   <a-button type="primary">Primary</a-button>
  3.   <a-button>Default</a-button>
  4.   <a-button type="dashed">Dashed</a-button>
  5.   <a-button type="danger">Danger</a-button>
  6.   <a-config-provider :auto-insert-space-in-button="false">
  7.     <a-button type="primary">按钮</a-button>
  8.   </a-config-provider>
  9.   <a-button type="primary">按钮</a-button>
  10.   <a-button type="link">Link</a-button>
  11. </template>

Button按钮 - 图2

幽灵按钮

幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上。

  1. <template>
  2.   <div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
  3.     <a-button type="primary" ghost>Primary</a-button>
  4.     <a-button ghost>Default</a-button>
  5.     <a-button type="dashed" ghost>Dashed</a-button>
  6.     <a-button type="danger" ghost>Danger</a-button>
  7.     <a-button type="link" ghost>Link</a-button>
  8.   </div>
  9. </template>

Button按钮 - 图3LoadingButton按钮 - 图4Loading
mouseenter me!poweroff延迟1s
Button按钮 - 图5Button按钮 - 图6Button按钮 - 图7

加载中状态

添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。

  1. <template>
  2.   <a-button type="primary" loading>Loading</a-button>
  3.   <a-button type="primary" size="small" loading>Loading</a-button>
  4.   <br />
  5.   <a-button type="primary" :loading="loading" @mouseenter="loading = true">mouseenter me!</a-button>
  6.   <a-button type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
  7.     延迟1s
  8.   </a-button>
  9.   <br />
  10.   <a-button type="primary" loading />
  11.   <a-button type="primary" shape="circle" loading />
  12.   <a-button type="danger" shape="round" loading />
  13. </template>
  14. <script lang="ts">
  15. import { defineComponent, ref } from 'vue';
  17. interface DelayLoading {
  18.   delay: number;
  19. }
  20. export default defineComponent({
  21.   setup() {
  22.     const iconLoading = ref<boolean | DelayLoading>(false);
  23.     const enterIconLoading = () => {
  24.       iconLoading.value = { delay: 1000 };
  25.     };
  26.     return {
  27.       loading: ref(false),
  28.       iconLoading,
  29.       enterIconLoading,
  30.     };
  31.   },
  32. });
  33. </script>

Button按钮 - 图8

PrimaryNormalDashedDangerLink
Button按钮 - 图9Button按钮 - 图10 Button按钮 - 图11 Download Button按钮 - 图12Button按钮 - 图13Download

按钮尺寸

按钮有大、中、小三种尺寸。

通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。

  1. <template>
  2.   <a-radio-group v-model:value="size">
  3.     <a-radio-button value="large">Large</a-radio-button>
  4.     <a-radio-button value="default">Default</a-radio-button>
  5.     <a-radio-button value="small">Small</a-radio-button>
  6.   </a-radio-group>
  7.   <br />
  8.   <br />
  9.   <a-button type="primary" :size="size">Primary</a-button>
  10.   <a-button :size="size">Normal</a-button>
  11.   <a-button type="dashed" :size="size">Dashed</a-button>
  12.   <a-button type="danger" :size="size">Danger</a-button>
  13.   <a-button type="link" :size="size">Link</a-button>
  14.   <br />
  15.   <a-button type="primary" :size="size">
  16.     <template #icon>
  17.       <DownloadOutlined />
  18.     </template>
  19.   </a-button>
  20.   <a-button type="primary" shape="circle" :size="size">
  21.     <template #icon>
  22.       <DownloadOutlined />
  23.     </template>
  24.   </a-button>
  25.   <a-button type="primary" shape="round" :size="size">
  26.     <template #icon>
  27.       <DownloadOutlined />
  28.       Download
  29.     </template>
  30.   </a-button>
  31.   <a-button type="primary" shape="round" :size="size">
  32.     <template #icon>
  33.       <DownloadOutlined />
  34.     </template>
  35.   </a-button>
  36.   <a-button type="primary" :size="size">
  37.     <template #icon>
  38.       <DownloadOutlined />
  39.     </template>
  40.     Download
  41.   </a-button>
  42.   <br />
  43. </template>
  44. <script lang="ts">
  45. import { DownloadOutlined } from '@ant-design/icons-vue';
  46. import { defineComponent, ref } from 'vue';
  47. export default defineComponent({
  48.   components: {
  49.     DownloadOutlined,
  50.   },
  51.   setup() {
  52.     return {
  53.       size: ref('large'),
  54.     };
  55.   },
  56. });
  57. </script>

PrimaryPrimary(disabled)
DefaultDefault(disabled)
DashedDashed(disabled)
LinkLink(disabled)

Button按钮 - 图14

不可用状态

添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。

  1. <template>
  2.   <a-button type="primary">Primary</a-button>
  3.   <a-button type="primary" disabled>Primary(disabled)</a-button>
  4.   <br />
  5.   <a-button>Default</a-button>
  6.   <a-button disabled>Default(disabled)</a-button>
  7.   <br />
  8.   <a-button type="dashed">Dashed</a-button>
  9.   <a-button type="dashed" disabled>Dashed(disabled)</a-button>
  10.   <br />
  11.   <a-button type="link">Link</a-button>
  12.   <a-button type="link" disabled>Link(disabled)</a-button>
  13.   <div :style="{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }">
  14.     <a-button ghost>Ghost</a-button>
  15.     <a-button ghost disabled>Ghost(disabled)</a-button>
  16.   </div>
  17. </template>

Button按钮 - 图15AButton按钮 - 图16SearchButton按钮 - 图17Button按钮 - 图18SearchButton按钮 - 图19Button按钮 - 图20SearchButton按钮 - 图21Button按钮 - 图22Search

图标按钮

当需要在 Button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Button 内使用 Icon 组件。

如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。

  1. <template>
  2.   <a-button type="primary" shape="circle">
  3.     <template #icon><SearchOutlined /></template>
  4.   </a-button>
  5.   <a-button type="primary" shape="circle">A</a-button>
  6.   <a-button type="primary">
  7.     <template #icon><SearchOutlined /></template>
  8.     Search
  9.   </a-button>
  10.   <a-button shape="circle">
  11.     <template #icon><SearchOutlined /></template>
  12.   </a-button>
  13.   <a-button>
  14.     <template #icon><SearchOutlined /></template>
  15.     Search
  16.   </a-button>
  17.   <a-button shape="circle">
  18.     <template #icon><SearchOutlined /></template>
  19.   </a-button>
  20.   <a-button>
  21.     <template #icon><SearchOutlined /></template>
  22.     Search
  23.   </a-button>
  24.   <a-button type="dashed" shape="circle">
  25.     <template #icon><SearchOutlined /></template>
  26.   </a-button>
  27.   <a-button type="dashed">
  28.     <template #icon><SearchOutlined /></template>
  29.     Search
  30.   </a-button>
  31. </template>
  32. <script>
  33. import { SearchOutlined } from '@ant-design/icons-vue';
  34. export default {
  35.   components: {
  36.     SearchOutlined,
  37.   },
  38. };
  39. </script>

PrimarysecondaryActionsButton按钮 - 图23

多个按钮组合

按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 Dropdown.Button 中组合使用。

  1. <template>
  2.   <a-button type="primary">Primary</a-button>
  3.   <a-button>secondary</a-button>
  4.   <a-dropdown>
  5.     <template #overlay>
  6.       <a-menu @click="handleMenuClick">
  7.         <a-menu-item key="1">1st item</a-menu-item>
  8.         <a-menu-item key="2">2nd item</a-menu-item>
  9.         <a-menu-item key="3">3rd item</a-menu-item>
  10.       </a-menu>
  11.     </template>
  12.     <a-button>
  13.       Actions
  14.       <DownOutlined />
  15.     </a-button>
  16.   </a-dropdown>
  17. </template>
  18. <script lang="ts">
  19. import { DownOutlined } from '@ant-design/icons-vue';
  20. import { defineComponent } from 'vue';
  21. export default defineComponent({
  22.   components: {
  23.     DownOutlined,
  24.   },
  25.   setup() {
  26.     const handleMenuClick = (e: Event) => {
  27.       console.log('click', e);
  28.     };
  29.     return {
  30.       handleMenuClick,
  31.     };
  32.   },
  33. });
  34. </script>

PrimaryDefaultDashedDangerLink

Block 按钮

block 属性将使按钮适合其父宽度。

  1. <template>
  2.   <a-button type="primary" block>Primary</a-button>
  3.   <a-button block>Default</a-button>
  4.   <a-button type="dashed" block>Dashed</a-button>
  5.   <a-button type="danger" block>Danger</a-button>
  6.   <a-button type="link" block>Link</a-button>
  7. </template>

API

通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：type -> shape -> size -> loading -> disabled。

按钮的属性说明如下：

属性说明类型默认值版本
disabled按钮失效状态booleanfalse
ghost幽灵属性，使按钮背景透明booleanfalse
htmlType设置 button 原生的 type 值，可选值请参考 HTML 标准stringbutton
icon设置按钮的图标类型v-slot-
loading设置按钮载入状态boolean | { delay: number }false
shape设置按钮形状，可选值为 circle、 round 或者不设string-
size设置按钮大小，可选值为 small large 或者不设stringdefault
type设置按钮类型，可选值为 primary dashed danger link 或者不设stringdefault
block将按钮宽度调整为其父宽度的选项booleanfalse

事件

事件名称说明回调参数版本
click点击按钮时的回调(event) => void

支持原生 button 的其他所有属性。

FAQ

如何移除 2 个汉字之间的空格

设置 ConfigProvider 的 autoInsertSpaceInButton 为 false。