按钮用于开始一个即时操作
基本使用
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 | 按钮的图标 | - |