Button按钮 - 图1

Button 按钮

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

何时使用

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

组件注册

  1. import { Button } from 'ant-design-vue';
  2. Vue.use(Button);

代码演示

Button按钮 - 图2

按钮类型

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

  1. <template>
  2.   <div>
  3.     <a-button type="primary">
  4.       Primary
  5.     </a-button>
  6.     <a-button>Default</a-button>
  7.     <a-button type="dashed">
  8.       Dashed
  9.     </a-button>
  10.     <a-button type="danger">
  11.       Danger
  12.     </a-button>
  13.     <a-config-provider :auto-insert-space-in-button="false">
  14.       <a-button type="primary">
  15.         按钮
  16.       </a-button>
  17.     </a-config-provider>
  18.     <a-button type="primary">
  19.       按钮
  20.     </a-button>
  21.     <a-button type="link">
  22.       Link
  23.     </a-button>
  24.   </div>
  25. </template>

Button按钮 - 图3

不可用状态

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

  1. <template>
  2.   <div>
  3.     <a-button type="primary">
  4.       Primary
  5.     </a-button>
  6.     <a-button type="primary" disabled>
  7.       Primary(disabled)
  8.     </a-button>
  9.     <br />
  10.     <a-button>Default</a-button>
  11.     <a-button disabled>
  12.       Default(disabled)
  13.     </a-button>
  14.     <br />
  15.     <a-button type="dashed">
  16.       Dashed
  17.     </a-button>
  18.     <a-button type="dashed" disabled>
  19.       Dashed(disabled)
  20.     </a-button>
  21.     <br />
  22.     <a-button type="link">
  23.       Link
  24.     </a-button>
  25.     <a-button type="link" disabled>
  26.       Link(disabled)
  27.     </a-button>
  28.     <div :style="{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }">
  29.       <a-button ghost>
  30.         Ghost
  31.       </a-button>
  32.       <a-button ghost disabled>
  33.         Ghost(disabled)
  34.       </a-button>
  35.     </div>
  36.   </div>
  37. </template>

Button按钮 - 图4

图标按钮

当需要在 Button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Button 内使用 Icon 组件。
如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。 

  1. <template>
  2.   <div>
  3.     <a-button type="primary" shape="circle" icon="search" />
  4.     <a-button type="primary" shape="circle">
  5.       A
  6.     </a-button>
  7.     <a-button type="primary" icon="search">
  8.       Search
  9.     </a-button>
  10.     <a-button shape="circle" icon="search" />
  11.     <a-button icon="search">
  12.       Search
  13.     </a-button>
  14.     <a-button shape="circle" icon="search" />
  15.     <a-button icon="search">
  16.       Search
  17.     </a-button>
  18.     <a-button type="dashed" shape="circle" icon="search" />
  19.     <a-button type="dashed" icon="search">
  20.       Search
  21.     </a-button>
  22.   </div>
  23. </template>

Button按钮 - 图5

多个按钮组合

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

  1. <template>
  2.   <div>
  3.     <a-button type="primary">
  4.       Primary
  5.     </a-button>
  6.     <a-button>secondary</a-button>
  7.     <a-dropdown>
  8.       <a-menu slot="overlay" @click="handleMenuClick">
  9.         <a-menu-item key="1">
  10.           1st item
  11.         </a-menu-item>
  12.         <a-menu-item key="2">
  13.           2nd item
  14.         </a-menu-item>
  15.         <a-menu-item key="3">
  16.           3rd item
  17.         </a-menu-item>
  18.       </a-menu>
  19.       <a-button> Actions <a-icon type="down" /> </a-button>
  20.     </a-dropdown>
  21.   </div>
  22. </template>
  23. <script>
  24. export default {
  25.   methods: {
  26.     handleMenuClick(e) {
  27.       console.log('click', e);
  28.     },
  29.   },
  30. };
  31. </script>

Button按钮 - 图6

block 按钮

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

  1. <template>
  2.   <div>
  3.     <a-button type="primary" block>
  4.       Primary
  5.     </a-button>
  6.     <a-button block>
  7.       Default
  8.     </a-button>
  9.     <a-button type="dashed" block>
  10.       Dashed
  11.     </a-button>
  12.     <a-button type="danger" block>
  13.       Danger
  14.     </a-button>
  15.     <a-button type="link" block>
  16.       Link
  17.     </a-button>
  18.   </div>
  19. </template>

Button按钮 - 图7

按钮组合

可以将多个 Button 放入 Button.Group 的容器中。
通过设置 size 为 large small 分别把按钮组合设为大、小尺寸。若不设置 size，则尺寸为中。 

  1. <template>
  2.   <div id="components-button-demo-button-group">
  3.     <h4>Basic</h4>
  4.     <a-button-group>
  5.       <a-button>Cancel</a-button>
  6.       <a-button type="primary">
  7.         OK
  8.       </a-button>
  9.     </a-button-group>
  10.     <a-button-group>
  11.       <a-button disabled>
  12.         L
  13.       </a-button>
  14.       <a-button disabled>
  15.         M
  16.       </a-button>
  17.       <a-button disabled>
  18.         R
  19.       </a-button>
  20.     </a-button-group>
  21.     <a-button-group>
  22.       <a-button type="primary">
  23.         L
  24.       </a-button>
  25.       <a-button>M</a-button>
  26.       <a-button>M</a-button>
  27.       <a-button type="dashed">
  28.         R
  29.       </a-button>
  30.     </a-button-group>
  32.     <h4>With Icon</h4>
  33.     <a-button-group>
  34.       <a-button type="primary"> <a-icon type="left" />Go back </a-button>
  35.       <a-button type="primary"> Go forward<a-icon type="right" /> </a-button>
  36.     </a-button-group>
  37.     <a-button-group>
  38.       <a-button type="primary" icon="cloud" />
  39.       <a-button type="primary" icon="cloud-download" />
  40.     </a-button-group>
  41.   </div>
  42. </template>
  43. <style>
  44. #components-button-demo-button-group > h4 {
  45.   margin: 16px 0;
  46.   font-size: 14px;
  47.   line-height: 1;
  48.   font-weight: normal;
  49. }
  50. #components-button-demo-button-group > h4:first-child {
  51.   margin-top: 0;
  52. }
  53. #components-button-demo-button-group .ant-btn-group {
  54.   margin-right: 8px;
  55. }
  56. </style>

Button按钮 - 图8

幽灵按钮

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

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

Button按钮 - 图9

加载中状态

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

  1. <template>
  2.   <div>
  3.     <a-button type="primary" loading>
  4.       Loading
  5.     </a-button>
  6.     <a-button type="primary" size="small" loading>
  7.       Loading
  8.     </a-button>
  9.     <br />
  10.     <a-button type="primary" :loading="loading" @mouseenter="enterLoading">
  11.       mouseenter me!
  12.     </a-button>
  13.     <a-button type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
  14.       延迟1s
  15.     </a-button>
  16.     <br />
  17.     <a-button type="primary" loading />
  18.     <a-button type="primary" shape="circle" loading />
  19.     <a-button type="danger" shape="round" loading />
  20.   </div>
  21. </template>
  22. <script>
  23. export default {
  24.   data() {
  25.     return {
  26.       loading: false,
  27.       iconLoading: false,
  28.     };
  29.   },
  30.   methods: {
  31.     enterLoading() {
  32.       this.loading = true;
  33.     },
  34.     enterIconLoading() {
  35.       this.iconLoading = { delay: 1000 };
  36.     },
  37.   },
  38. };
  39. </script>

Button按钮 - 图10

按钮尺寸

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

  1. <template>
  2.   <div>
  3.     <a-radio-group :value="size" @change="handleSizeChange">
  4.       <a-radio-button value="large">
  5.         Large
  6.       </a-radio-button>
  7.       <a-radio-button value="default">
  8.         Default
  9.       </a-radio-button>
  10.       <a-radio-button value="small">
  11.         Small
  12.       </a-radio-button>
  13.     </a-radio-group>
  14.     <br><br>
  15.     <a-button type="primary" :size="size">
  16.       Primary
  17.     </a-button>
  18.     <a-button :size="size">
  19.       Normal
  20.     </a-button>
  21.     <a-button type="dashed" :size="size">
  22.       Dashed
  23.     </a-button>
  24.     <a-button type="danger" :size="size">
  25.       Danger
  26.     </a-button>
  27.     <a-button type="link" :size="size">
  28.       Link
  29.     </a-button>
  30.     <br>
  31.     <a-button type="primary" icon="download" :size="size" />
  32.     <a-button type="primary" shape="circle" icon="download" :size="size" />
  33.     <a-button type="primary" shape="round" icon="download" :size="size" />Download</a-button>
  34.     <a-button type="primary" shape="round" icon="download" :size="size" />
  35.     <a-button type="primary" icon="download" :size="size">
  36.       Download
  37.     </a-button>
  38.     <br>
  39.     <a-button-group :size="size">
  40.       <a-button type="primary">
  41.         <a-icon type="left" />Backward
  42.       </a-button>
  43.       <a-button type="primary">
  44.         Forward<a-icon type="right" />
  45.       </a-button>
  46.     </a-button-group>
  47.   </div>
  48. </template>
  49. <script>
  50.   export default {
  51.     data() {
  52.       return {
  53.         size: 'large',
  54.       };
  55.     },
  56.     methods: {
  57.       handleSizeChange(e) {
  58.         this.size = e.target.value;
  59.       },
  60.     },
  61.   };
  62. </script>

API

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

按钮的属性说明如下：

属性说明类型默认值版本
disabled按钮失效状态booleanfalse
ghost幽灵属性，使按钮背景透明booleanfalse
htmlType设置 button 原生的 type 值，可选值请参考 HTML 标准stringbutton
icon设置按钮的图标类型string-
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。