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 的容器中。通过设置 sizelarge 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>
  19. <h4>With Icon</h4>
  20. <a-button-group>
  21. <a-button type="primary">
  22. <a-icon type="left" />Go back
  23. </a-button>
  24. <a-button type="primary">
  25. Go forward<a-icon type="right" />
  26. </a-button>
  27. </a-button-group>
  28. <a-button-group>
  29. <a-button type="primary" icon="cloud" />
  30. <a-button type="primary" icon="cloud-download" />
  31. </a-button-group>
  32. </div>
  33. </template>
  34. <style>
  35. #components-button-demo-button-group h4 {
  36. margin: 16px 0;
  37. font-size: 14px;
  38. line-height: 1;
  39. font-weight: normal;
  40. }
  41. #components-button-demo-button-group h4:first-child {
  42. margin-top: 0;
  43. }
  44. #components-button-demo-button-group .ant-btn-group {
  45. margin-right: 8px;
  46. }
  47. </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

按钮尺寸

按钮有大、中、小三种尺寸。通过设置 sizelarge 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 上。