Button 按钮

基础组件，触发业务逻辑时使用。

注意：非 template/render 模式下，需使用 i-button。

代码示例

Button 按钮 - 图1

按钮类型

按钮类型有：默认按钮、主按钮、虚线按钮、文字按钮以及四种颜色按钮。

通过设置type为primary、dashed、text、info、success、warning、error创建不同样式的按钮，不设置为默认样式。

  1. <template>
  2.     <Button>Default</Button>
  3.     <Button type="primary">Primary</Button>
  4.     <Button type="dashed">Dashed</Button>
  5.     <Button type="text">Text</Button>
  6.     <br><br>
  7.     <Button type="info">Info</Button>
  8.     <Button type="success">Success</Button>
  9.     <Button type="warning">Warning</Button>
  10.     <Button type="error">Error</Button>
  11. </template>
  12. <script>
  13.     export default {
  15.     }
  16. </script>

Button 按钮 - 图2

幽灵按钮

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

  1. <template>
  2.     <Button type="default" ghost>Default</Button>
  3.     <Button type="primary" ghost>Primary</Button>
  4.     <Button type="dashed" ghost>Dashed</Button>
  5.     <Button type="text" ghost>Text</Button>
  6.     <Button type="info" ghost>Info</Button>
  7.     <Button type="success" ghost>Success</Button>
  8.     <Button type="warning" ghost>Warning</Button>
  9.     <Button type="error" ghost>Error</Button>
  10. </template>
  11. <script>
  12.     export default {
  14.     }
  15. </script>

Button 按钮 - 图3

图标按钮及按钮形状

通过设置icon属性在Button内嵌入一个Icon，或者直接在Button内使用Icon组件。

使用Button的icon属性，图标位置将在最左边，如果需要自定义位置，需使用Icon组件。

通过设置shape属性为circle，可将按钮置为圆的形状。

  1. <template>
  2.     <Button type="primary" shape="circle" icon="ios-search"></Button>
  3.     <Button type="primary" icon="ios-search">Search</Button>
  4.     <Button type="primary" shape="circle" icon="ios-search">Search</Button>
  5.     <Button type="primary" shape="circle">Circle</Button>
  6.     <br><br>
  7.     <Button shape="circle" icon="ios-search"></Button>
  8.     <Button icon="ios-search">Search</Button>
  9.     <Button shape="circle" icon="ios-search">Search</Button>
  10.     <Button shape="circle">Circle</Button>
  11. </template>
  12. <script>
  13.     export default {
  15.     }
  16. </script>

Button 按钮 - 图4

按钮尺寸

按钮有三种尺寸：大、默认（中）、小

通过设置size为large和small将按钮设置为大和小尺寸，不设置为默认（中）尺寸。

  1. <template>
  2.     <div>
  3.         <RadioGroup v-model="buttonSize" type="button">
  4.             <Radio label="large">Large</Radio>
  5.             <Radio label="default">Default</Radio>
  6.             <Radio label="small">small</Radio>
  7.         </RadioGroup>
  8.         <br><br>
  9.         <Button :size="buttonSize" type="primary">Primary</Button>
  10.         <Button :size="buttonSize" type="default">Default</Button>
  11.         <Button :size="buttonSize" type="dashed">Dashed</Button>
  12.         <Button :size="buttonSize" type="text">Text</Button>
  13.         <br><br>
  14.         <Button :size="buttonSize" icon="ios-download-outline" type="primary" shape="circle"></Button>
  15.         <Button :size="buttonSize" icon="ios-download-outline" type="primary">Download</Button>
  16.         <br><br>
  17.         <ButtonGroup :size="buttonSize">
  18.             <Button :size="buttonSize" type="primary">
  19.                 <Icon type="ios-arrow-back" />
  20.                 Backward
  21.             </Button>
  22.             <Button :size="buttonSize" type="primary">
  23.                 Forward
  24.                 <Icon type="ios-arrow-forward" />
  25.             </Button>
  26.         </ButtonGroup>
  27.     </div>
  28. </template>
  29. <script>
  30.     export default {
  31.         data () {
  32.             return {
  33.                 buttonSize: 'large'
  34.             }
  35.         },
  36.     }
  37. </script>

Button 按钮 - 图5

长按钮

通过设置属性 long 可将按钮宽度设置为 100%，常用于弹窗内操作按钮。

使用者也可以直接通过给组件添加 style 来设置更细节的样式，比如定宽。

  1. <template>
  2.     <Button type="success" long>SUBMIT</Button>
  3.     <br><br>
  4.     <Button type="error" long>DELETE</Button>
  5. </template>
  6. <script>
  7.     export default {
  9.     }
  10. </script>

Button 按钮 - 图6

不可用状态

通过添加disabled属性可将按钮设置为不可用状态。

  1. <template>
  2.     <Button>Default</Button>
  3.     <Button disabled>Default(Disabled)</Button>
  4.     <br>
  5.     <Button type="primary">Primary</Button>
  6.     <Button type="primary" disabled>Primary(Disabled)</Button>
  7.     <br>
  8.     <Button type="dashed">Dashed</Button>
  9.     <Button type="dashed" disabled>Dashed(Disabled)</Button>
  10.     <br>
  11.     <Button type="text">Text</Button>
  12.     <Button type="text" disabled>Text(Disabled)</Button>
  13. </template>
  14. <script>
  15.     export default {
  17.     }
  18. </script>

Button 按钮 - 图7

加载中状态

通过添加loading属性可以让按钮处于加载中状态，后两个按钮在点击时进入加载状态。

  1. <template>
  2.     <Button type="primary" loading>Loading...</Button>
  3.     <Button type="primary" :loading="loading" @click="toLoading">
  4.         <span v-if="!loading">Click me!</span>
  5.         <span v-else>Loading...</span>
  6.     </Button>
  7.     <Button type="primary" :loading="loading2" icon="ios-power" @click="toLoading2">
  8.         <span v-if="!loading2">Click me!</span>
  9.         <span v-else>Loading...</span>
  10.     </Button>
  11.     <Button loading shape="circle"></Button>
  12.     <Button loading shape="circle" type="primary"></Button>
  13. </template>
  14. <script>
  15.     export default {
  16.         data () {
  17.             return {
  18.                 loading: false,
  19.                 loading2: false
  20.             }
  21.         },
  22.         methods: {
  23.             toLoading () {
  24.                 this.loading = true;
  25.             },
  26.             toLoading2 () {
  27.                 this.loading2 = true;
  28.             }
  29.         }
  30.     }
  31. </script>

Button 按钮 - 图8

按钮组合

将多个Button放入ButtonGroup内，可实现按钮组合的效果。

通过设置ButtonGroup的属性size为large和small，可将按钮组尺寸设置为大和小，不设置size，则为默认（中）尺寸。

通过设置ButtonGroup的属性shape为circle，可将按钮组形状设置为圆角。

  1. <template>
  2.     <h4>Basic</h4>
  3.     <br><br>
  4.     <ButtonGroup>
  5.         <Button>Cancel</Button>
  6.         <Button type="primary">Confirm</Button>
  7.     </ButtonGroup>
  8.     <ButtonGroup>
  9.         <Button disabled>Yesterday</Button>
  10.         <Button disabled>Today</Button>
  11.         <Button disabled>Tomorrow</Button>
  12.     </ButtonGroup>
  13.     <ButtonGroup>
  14.         <Button type="primary">L</Button>
  15.         <Button>M</Button>
  16.         <Button>M</Button>
  17.         <Button type="dashed">R</Button>
  18.     </ButtonGroup>
  19.     <br><br>
  20.     <h4>Icons</h4>
  21.     <br><br>
  22.     <ButtonGroup>
  23.         <Button type="primary">
  24.             <Icon type="ios-arrow-back"></Icon>
  25.             Backward
  26.         </Button>
  27.         <Button type="primary">
  28.             Forward
  29.             <Icon type="ios-arrow-forward"></Icon>
  30.         </Button>
  31.     </ButtonGroup>
  32.     <ButtonGroup>
  33.         <Button type="primary" icon="ios-skip-backward"></Button>
  34.         <Button type="primary" icon="ios-skip-forward"></Button>
  35.     </ButtonGroup>
  36.     <ButtonGroup>
  37.         <Button icon="ios-color-wand-outline"></Button>
  38.         <Button icon="ios-sunny-outline"></Button>
  39.         <Button icon="ios-crop"></Button>
  40.         <Button icon="ios-color-filter-outline"></Button>
  41.     </ButtonGroup>
  42.     <br><br>
  43.     <h4>Circle</h4>
  44.     <br><br>
  45.     <ButtonGroup shape="circle">
  46.         <Button type="primary">
  47.             <Icon type="ios-arrow-back"></Icon>
  48.             Backward
  49.         </Button>
  50.         <Button type="primary">
  51.             Forward
  52.             <Icon type="ios-arrow-forward"></Icon>
  53.         </Button>
  54.     </ButtonGroup>
  55.     <ButtonGroup shape="circle">
  56.         <Button type="primary" icon="ios-skip-backward"></Button>
  57.         <Button type="primary" icon="ios-skip-forward"></Button>
  58.     </ButtonGroup>
  59.     <ButtonGroup shape="circle">
  60.         <Button icon="ios-color-wand-outline"></Button>
  61.         <Button icon="ios-sunny-outline"></Button>
  62.         <Button icon="ios-crop"></Button>
  63.         <Button icon="ios-color-filter-outline"></Button>
  64.     </ButtonGroup>
  65.     <br><br>
  66.     <h4>Size</h4>
  67.     <br><br>
  68.     <ButtonGroup size="large">
  69.         <Button>Large</Button>
  70.         <Button>Large</Button>
  71.     </ButtonGroup>
  72.     <ButtonGroup>
  73.         <Button>Default</Button>
  74.         <Button>Default</Button>
  75.     </ButtonGroup>
  76.     <ButtonGroup size="small">
  77.         <Button>Small</Button>
  78.         <Button>Small</Button>
  79.     </ButtonGroup>
  80.     <br><br>
  81.     <ButtonGroup size="large" shape="circle">
  82.         <Button>Large</Button>
  83.         <Button>Large</Button>
  84.     </ButtonGroup>
  85.     <ButtonGroup shape="circle">
  86.         <Button>Default</Button>
  87.         <Button>Default</Button>
  88.     </ButtonGroup>
  89.     <ButtonGroup size="small" shape="circle">
  90.         <Button>Small</Button>
  91.         <Button>Small</Button>
  92.     </ButtonGroup>
  93. </template>
  94. <script>
  95.     export default {
  97.     }
  98. </script>

Button 按钮 - 图9

按钮组纵向排列

通过设置ButtonGroup的属性vertical，可以使按钮组纵向排列。

  1. <template>
  2.     <ButtonGroup vertical>
  3.         <Button icon="logo-facebook"></Button>
  4.         <Button icon="logo-twitter"></Button>
  5.         <Button icon="logo-googleplus"></Button>
  6.         <Button icon="logo-tumblr"></Button>
  7.     </ButtonGroup>
  8. </template>
  9. <script>
  10.     export default {
  12.     }
  13. </script>

Button 按钮 - 图10

跳转

通过设置 to 可以实现点击按钮直接跳转，支持传入 vue-router 对象。

设置 replace 则不会保存历史记录。

设置 target，会跟 a 标签一样的行为。

  1. <template>
  2.     <Button to="/components/icon-en">Normal</Button>
  3.     <Button to="/components/icon-en" replace>No history</Button>
  4.     <Button to="//iviewui.com" target="_blank">New window</Button>
  5. </template>
  6. <script>
  7.     export default {
  9.     }
  10. </script>

API

Button props

属性说明类型默认值
type按钮类型，可选值为 default、primary、dashed、text、info、success、warning、error或者不设置Stringdefault
ghost幽灵属性，使按钮背景透明Booleanfalse
size按钮大小，可选值为large、small、default或者不设置Stringdefault
shape按钮形状，可选值为circle或者不设置String-
long开启后，按钮的长度为 100%Booleanfalse
html-type设置button原生的type，可选值为button、submit、resetStringbutton
disabled设置按钮为禁用状态Booleanfalse
loading设置按钮为加载中状态Booleanfalse
icon设置按钮的图标类型String-
custom-icon设置按钮的自定义图标String-
to跳转的链接，支持 vue-router 对象String | Object-
replace路由跳转时，开启 replace 将不会向 history 添加新记录Booleanfalse
target相当于 a 链接的 target 属性String_self
append 3.4.0同 vue-router appendBooleanfalse

ButtonGroup props

属性说明类型默认值
size按钮组合大小，可选值为large、small、default或者不设置Stringdefault
shape按钮组合形状，可选值为circle或者不设置String-
vertical是否纵向排列按钮组Booleanfalse