按钮用于开始一个即时操作
基本使用
html
<iui-button>Button</iui-button><iui-button>Button</iui-button>按钮类型
按钮分为 primary - 主要按钮、secondary - 次要按钮（默认）、outline - 线形按钮 按钮三种类型
html
<iui-button type="primary">主要按钮</iui-button>
<iui-button type="secondary">次要按钮</iui-button>
<iui-button type="outline">线框按钮</iui-button><iui-button type="primary">主要按钮</iui-button>
<iui-button type="secondary">次要按钮</iui-button>
<iui-button type="outline">线框按钮</iui-button>按钮状态
按钮的状态分为 normal - 正常（默认）、success - 成功、warning - 警告、danger - 危险 四种，可以与按钮类型同时使用
html
<iui-button status="normal">正常按钮</iui-button>
<iui-button status="success">成功按钮</iui-button>
<iui-button status="danger">危险按钮</iui-button>
<iui-button status="warning">警告按钮</iui-button><iui-button status="normal">正常按钮</iui-button>
<iui-button status="success">成功按钮</iui-button>
<iui-button status="danger">危险按钮</iui-button>
<iui-button status="warning">警告按钮</iui-button>按钮尺寸
组件库内置了 huge - 超大、large - 大（默认）、medium - 中、small - 小、mini - 迷你 五种尺寸，如果无法满足需求，可以通过 size 属性传入 Number 类型自定义尺寸
html
<iui-button type="primary" size="huge">超大</iui-button>
<iui-button type="primary">默认</iui-button>
<iui-button type="primary" size="medium">中</iui-button>
<iui-button type="primary" size="small">小</iui-button>
<iui-button type="primary" size="mini">迷你</iui-button>
<!-- 自定义尺寸 -->
<iui-button type="primary" :size="50">Custom size</iui-button><iui-button type="primary" size="huge">超大</iui-button>
<iui-button type="primary">默认</iui-button>
<iui-button type="primary" size="medium">中</iui-button>
<iui-button type="primary" size="small">小</iui-button>
<iui-button type="primary" size="mini">迷你</iui-button>
<!-- 自定义尺寸 -->
<iui-button type="primary" :size="50">Custom size</iui-button>按钮形状
按钮分为 square - 长方形（默认）、round - 全圆角、circle - 圆形三种形状。
圆形一般用于图标按钮，不会显示按钮文字。
html
<iui-button shape="square">方形</iui-button>
<iui-button shape="round">圆角</iui-button>
<!-- 圆形图标按钮 -->
<iui-button shape="circle" icon="edit"> </iui-button><iui-button shape="square">方形</iui-button>
<iui-button shape="round">圆角</iui-button>
<!-- 圆形图标按钮 -->
<iui-button shape="circle" icon="edit"> </iui-button>按钮加载中状态
通过设置 loading 可以让按钮处于加载中状态。处于加载中状态的按钮不会触发点击事件。
html
<iui-button loading>加载中</iui-button><iui-button loading>加载中</iui-button>图标按钮
可以为图标添加 icon 属性，支持 iui-icon 组件的所有图标。
html
<iui-button icon="plus">图标按钮</iui-button><iui-button icon="plus">图标按钮</iui-button>API
<Button>props| 参数 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| type | 按钮的类型 | primary | secondary | outline | secondary |
| shape | 按钮的形状 | square | round | circle | square |
| loading | 按钮是否为加载中状态 | Boolean | false |
| disabled | 按钮是否禁用 | Boolean | false |
| size | 按钮的尺寸 | huge | large | medium | small | mini | Number | large |
| status | 按钮的状态 | normal | success | danger | warning | normal |
| inline | 内联按钮 | Boolean | false |
| icon | 按钮的图标 | String | - |
| openType | 小程序开放能力 | String | - |
<Button>events| 事件名 | 描述 | 参数 |
|---|---|---|
| click | 点击按钮时触发 | e: Event |
| getphonenumber | 获取用户手机号 | e: Event |
| opensetting | 打开设置面板 | e: Event |
| launchapp | 打开App成功事件 | e: Event |
| error | 开放能力错误事件 | e: Event |
<Button>slots| 插槽名 | 描述 | 参数 |
|---|---|---|
| icon | 按钮的图标 | - |