Button 按钮
基础用法
链接按钮
文字按钮
没有边框和背景色的按钮。
图标按钮
使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。
按钮组
以按钮组的方式出现，常用于多项类似操作。
加载状态按钮
点击按钮来加载数据，并向用户反馈加载状态。
通过设置 loading 属性为 true 来显示加载中状态。
TIP
您可以使用 loading 插槽或 loadingIcon属性自定义您的loading图标
ps: loading 插槽优先级高于loadingIcon属性
调整尺寸
除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。
Tag
您可以自定义元素标签。例如，按钮，div，路由链接，nuxt链接。
自定义颜色
您可以自定义按钮的颜色。
我们将自动计算按钮处于 hover 和 active 状态时的颜色。
Button API
Button 属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| size | 尺寸 | enum 'large'| 'default'| 'small' | — |
| type | 类型 | enum 'primary'| 'success'| 'warning'| 'danger'| 'info'| 'text'(delete) | — |
| plain | 是否为朴素按钮 | boolean | false |
| text | 是否为文字按钮 | boolean | false |
| link | 是否为链接按钮 | boolean | false |
| round | 是否为圆角按钮 | boolean | false |
| circle | 是否为圆形按钮 | boolean | false |
| loading | 是否为加载中状态 | boolean | false |
| disabled | 按钮是否为禁用状态 | boolean | false |
| icon | 图标组件 | string / Component | — |
| color | 自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色 | string | — |
| tag | 自定义元素标签 | string / Component | button |
Button 插槽
| 插槽名 | 说明 |
|---|---|
| default | 自定义默认内容 |
| loading | 自定义加载中组件 |
| icon | 自定义图标组件 |