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 时,后者优先枚举
朴素判断是否为朴素按钮booleanfalse
text 2.2.0判断是否为文本按钮booleanfalse
bg 2.2.0决定文本按钮的背景色是否始终保持booleanfalse
link 2.2.1决定是否为链接按钮booleanfalse
圆角判断是否为圆形按钮booleanfalse
圆形决定是否为圆形按钮booleanfalse
加载中决定是否正在加载booleanfalse
loading-icon自定义加载图标组件string / Component加载中
disabled禁用按钮booleanfalse
icon图标组件string / Component
自动聚焦与原生按钮的 autofocus 属性相同booleanfalse
native-type与原生按钮的 type 属性相同枚举button
auto-insert-space自动在两个中文字符之间插入一个空格(这只在文本长度为2且所有字符都是中文时生效。)booleanfalse
color自定义按钮颜色,自动计算 hoveractive 状态的颜色string
暗黑模式暗黑模式,自动将 color 转换为暗黑模式的颜色booleanfalse
tag 2.3.4自定义元素标签string / Componentbutton

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自定义按钮组内容按钮

来源

组件样式文档

贡献者