Button 按钮
常用的按钮。
基础用法
禁用状态
disabled 属性决定了按钮是否为禁用状态。
链接按钮
警告
type="text" 属性已被 废弃,并 将会 在 3.0.0 版本被移除,请考虑切换到新的 API。
新的 API link 已在 2.2.1 版本中添加,您可以使用 type API 来设置链接按钮的主题。
文本按钮
提示
自 2.2.0 版本起,文本按钮有了新的设计。如果您想使用旧版本的按钮,可以查看 Link 组件。
API 也进行了更新,因为 type 属性也代表了按钮的样式。所以我们必须为文本按钮创建一个新的 API text: boolean。
没有边框和背景的按钮。
图标按钮
使用图标为按钮添加更多含义。你可以单独使用图标来节省空间,或者与文字一起使用。
按钮组
以按钮组的形式出现,可用于将一系列类似的操作组合在一起。
在 2.11.9 版本中,您可以使用 direction 属性。
加载状态按钮
点击按钮来加载数据,然后按钮会显示加载中的状态。
将 loading 属性设置为 true 来显示加载状态。
提示
您可以使用 loading 插槽或 loadingIcon 来自定义您的加载组件。
附:loading 插槽的优先级高于 loadingIcon。
尺寸
除了默认尺寸外,Button 组件还提供了三种额外的尺寸,供您在不同场景中选择。
标签 2.3.4
您可以自定义元素的标签,例如 button、div、a、router-link、nuxt-link。
自定义颜色 beta
您可以自定义按钮颜色。
我们会自动计算悬停颜色和激活颜色。
Button API
Button 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| size | 按钮尺寸 | 枚举 | — |
| type | 按钮类型,当设置 color 时,后者优先 | 枚举 | — |
| 朴素 | 判断是否为朴素按钮 | boolean | false |
| text 2.2.0 | 判断是否为文本按钮 | boolean | false |
| bg 2.2.0 | 决定文本按钮的背景色是否始终保持 | boolean | false |
| link 2.2.1 | 决定是否为链接按钮 | boolean | false |
| 圆角 | 判断是否为圆形按钮 | boolean | false |
| 圆形 | 决定是否为圆形按钮 | boolean | false |
| 加载中 | 决定是否正在加载 | boolean | false |
| loading-icon | 自定义加载图标组件 | string / Component | 加载中 |
| disabled | 禁用按钮 | boolean | false |
| icon | 图标组件 | string / Component | — |
| 自动聚焦 | 与原生按钮的 autofocus 属性相同 | boolean | false |
| native-type | 与原生按钮的 type 属性相同 | 枚举 | button |
| auto-insert-space | 自动在两个中文字符之间插入一个空格(这只在文本长度为2且所有字符都是中文时生效。) | boolean | false |
| color | 自定义按钮颜色,自动计算 hover 和 active 状态的颜色 | string | — |
| 暗黑模式 | 暗黑模式,自动将 color 转换为暗黑模式的颜色 | boolean | false |
| tag 2.3.4 | 自定义元素标签 | string / Component | button |
Button 插槽
| 名称 | 描述 |
|---|---|
| default | 自定义默认内容 |
| 加载中 | 自定义加载组件 |
| icon | 自定义图标组件 |
Button Exposes
| 名称 | 描述 | 类型 |
|---|---|---|
| ref | 按钮的 HTML 元素 | object |
| size | 按钮尺寸 | object |
| type | 按钮类型 | object |
| disabled | 按钮是否被禁用 | object |
| shouldAddSpace | 是否需要添加空格 | object |
ButtonGroup API
ButtonGroup 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| size | 控制该按钮组中按钮的尺寸 | 枚举 | — |
| type | 控制该按钮组中按钮的类型 | 枚举 | — |
| direction 2.11.9 | 显示方向 | 枚举 | horizontal |
ButtonGroup 插槽
| 名称 | 描述 | 子标签 |
|---|---|---|
| default | 自定义按钮组内容 | 按钮 |