Button 按钮
常用的操作按钮。
基础用法
禁用状态
你可以使用 disabled 属性来定义按钮是否被禁用。
文字按钮
没有边框和背景色的按钮。
图标按钮
使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。
虚线按钮
通过添加公共样式类名 sh-button-border_dashed，实现虚线按钮。
按钮组
以按钮组的方式出现，常用于多项类似操作。
加载状态按钮
点击按钮来加载数据，并向用户反馈加载状态。
通过设置 loading 属性为 true 来显示加载中状态。
TIP
您可以使用 loading 插槽或 loadingIcon属性自定义您的 loading 图标
ps: loading 插槽优先级高于loadingIcon属性
调整尺寸
除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。
Tag 2.3.4
您可以自定义元素标签。例如，按钮，div，路由链接，nuxt 链接。
Button API
Button Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| size | 尺寸 | enum | — |
| type | 类型 | enum | — |
| plain | 是否为朴素按钮 | boolean | false |
| text 2.2.0 | 是否为文字按钮 | boolean | false |
| bg 2.2.0 | 是否显示文字按钮背景颜色 | boolean | false |
| link 2.2.1 | 是否为链接按钮 | 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 属性 | enum | button |
| auto-insert-space | 自动在两个中文字符之间插入空格 | boolean | — |
| color | 自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色 | string | — |
| dark | dark 模式, 意味着自动设置 color 为 dark 模式的颜色 | boolean | false |
| tag 2.3.4 | 自定义元素标签 | string / Component | button |
Button Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义默认内容 |
| loading | 自定义加载中组件 |
| icon | 自定义图标组件 |
Button Exposes
| 属性名 | 说明 | 类型 |
|---|---|---|
| ref | 按钮 html 元素 | object |
| size | 按钮尺寸 | object |
| type | 按钮类型 | object |
| disabled | 按钮已禁用 | object |
| shouldAddSpace | 是否在两个字符之间插入空格 | object |
ButtonGroup API
ButtonGroup Attributes
| 插槽名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| size | 用于控制该按钮组内按钮的大小 | enum | — |
| type | 用于控制该按钮组内按钮的类型 | enum | — |
ButtonGroup Slots
| 插槽名 | 说明 | 子标签 |
|---|---|---|
| default | 自定义按钮组内容 | Button |