Button 按钮
常用的操作按钮。
基础用法
禁用状态
你可以使用 disabled 属性来定义按钮是否被禁用。
文字按钮
没有边框和背景色的按钮。
图标按钮
使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。
按钮组
通过按钮组来组合一系列相似的操作。
加载中
点击按钮来加载数据，并向用户反馈加载状态。
通过设置 loading 属性为 true 来显示加载中状态。
TIP
您可以使用 loading 插槽或 loadingIcon属性自定义您的 loading 图标
ps: loading 插槽优先级高于loadingIcon属性
各种尺寸的按钮
除了默认尺寸外，Button 组件还提供了三种额外的尺寸供您在不同的场景中选择。
自定义颜色 测试版
您可以自定义按钮颜色。
我们将自动计算 hover 和 active 颜色。
Button 属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| size | 尺寸 | string | large / default /small | — |
| type | 类型 | string | primary / success / warning / danger / info / text | — |
| plain | 是否为朴素按钮 | boolean | — | false |
| round | 是否为圆角按钮 | boolean | — | false |
| circle | 是否为圆形按钮 | boolean | — | false |
| loading | 是否为加载中状态 | boolean | — | false |
| loading-icon | 自定义加载中图标 | string / Component | — | Loading |
| disabled | 是否为禁用状态 | boolean | — | false |
| icon | 自定义图标 | string / Component | — | — |
| autofocus | 原生 autofocus 属性 | boolean | — | false |
| native-type | 原生 type 属性 | string | button / submit / reset | button |
| auto-insert-space | 自动在两个中文字符之间插入空格 | boolean | — |
Button 插槽
| 插槽名 | 说明 |
|---|---|
| — | 自定义默认内容 |
| loading | 自定义加载中组件 |
| icon | 自定义图标组件 |
Button Group 属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| size | 用于控制该按钮组内按钮的大小 | string | 与按钮的大小相同 | — |
| type | 用于控制该按钮组内按钮的类型 | string | 与按钮的类型一致 | — |
Button Group 插槽
| 插槽名 | 说明 | 子标签 |
|---|---|---|
| - | 自定义按钮组内容 | Button |