• Button 按钮
    • 何时使用
    • 组件注册
    • 代码演示
      • 按钮类型
      • 按钮组合
      • 不可用状态
      • 幽灵按钮
      • 图标按钮
      • 加载中状态
      • 多个按钮组合
      • 按钮尺寸
      • block 按钮
  • API
    • 事件

    Button 按钮

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

    何时使用

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

    组件注册

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

    代码演示

    Button按钮 - 图1

    按钮类型

    按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。 expand codeexpand code

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

    Button按钮 - 图4

    按钮组合

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

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

    Button按钮 - 图7

    不可用状态

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

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

    Button按钮 - 图10

    幽灵按钮

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

    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.   </div>
    8. </template>

    Button按钮 - 图13

    图标按钮

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

    1. <template>
    2.   <div>
    3.     <a-button type="primary" shape="circle" icon="search"></a-button>
    4.     <a-button type="primary" icon="search">Search</a-button>
    5.     <a-button shape="circle" icon="search" />
    6.     <a-button icon="search">Search</a-button>
    7.     <a-button shape="circle" icon="search" />
    8.     <a-button icon="search">Search</a-button>
    9.     <a-button type="dashed" shape="circle" icon="search" />
    10.     <a-button type="dashed" icon="search">Search</a-button>
    11.   </div>
    12. </template>

    Button按钮 - 图16

    加载中状态

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

    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 shape="circle" loading />
    18.     <a-button type="primary" shape="circle" loading />
    19.   </div>
    20. </template>
    21. <script>
    22. export default {
    23.   data () {
    24.     return {
    25.       loading: false,
    26.       iconLoading: false,
    27.     }
    28.   },
    29.   methods: {
    30.     enterLoading () {
    31.       this.loading = true
    32.     },
    33.     enterIconLoading () {
    34.       this.iconLoading = { delay: 1000 }
    35.     },
    36.   },
    37. }
    38. </script>

    Button按钮 - 图19

    多个按钮组合

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

    1. <template>
    2.   <div>
    3.     <a-button type="primary">Primary</a-button>
    4.     <a-button>secondary</a-button>
    5.     <a-dropdown>
    6.       <a-menu slot="overlay" @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.       <a-button>
    12.         Actions <a-icon type="down" />
    13.       </a-button>
    14.     </a-dropdown>
    15.   </div>
    16. </template>
    17. <script>
    18. export default {
    19.   methods: {
    20.     handleMenuClick(e) {
    21.       console.log('click', e);
    22.     }
    23.   }
    24. }
    25. </script>

    Button按钮 - 图22

    按钮尺寸

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

    1. <template>
    2.   <div>
    3.     <a-radio-group :value="size" @change="handleSizeChange">
    4.       <a-radio-button value="large">Large</a-radio-button>
    5.       <a-radio-button value="default">Default</a-radio-button>
    6.       <a-radio-button value="small">Small</a-radio-button>
    7.     </a-radio-group>
    8.     <br /><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.     <br />
    14.     <a-button type="primary" shape="circle" icon="download" :size="size" />
    15.     <a-button type="primary" icon="download" :size="size">Download</a-button>
    16.     <br />
    17.     <a-button-group :size="size">
    18.       <a-button type="primary">
    19.         <a-icon type="left" />Backward
    20.       </a-button>
    21.       <a-button type="primary">
    22.         Forward<a-icon type="right" />
    23.       </a-button>
    24.     </a-button-group>
    25.   </div>
    26. </template>
    27. <script>
    28. export default {
    29.   data () {
    30.     return {
    31.       size: 'large',
    32.     }
    33.   },
    34.   methods: {
    35.     handleSizeChange (e) {
    36.       this.size = e.target.value
    37.     },
    38.   },
    39. }
    40. </script>

    Button按钮 - 图25

    block 按钮

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

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

    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 或者不设string-
    size设置按钮大小，可选值为 small large 或者不设stringdefault
    type设置按钮类型，可选值为 primary dashed dangerstring-
    block将按钮宽度调整为其父宽度的选项booleanfalse

    事件

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

    <a-button>Hello world!</a-button> 最终会被渲染为 <button><span>Hello world!</span></button>，并且除了上表中的属性，其它属性都会直接传到原生 button 上。