• Button 按钮
    • 代码示例
    • API
      • Button props
      • ButtonGroup props

    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