Button 按钮

常用的操作按钮。

基础用法

禁用状态

你可以使用 disabled 属性来定义按钮是否被禁用。

链接按钮

WARNING

type="text" 已被 废弃,将于版本3.0.0移除,请考虑切换至新的 API。

新的 API link2.2.1 版本添加,同时可以使用 type API 设置链接按钮的主题样式。

文字按钮

TIP

文字按钮在现在有了全新的设计样式。 2.2.0 如果您想要使用老版样式的按钮,可以考虑使用 Link 组件。

API也已更新,由于 type 属性会同时控制按钮的样式, 因此我们通过一个新的 API text: boolean 来控制文字按钮。

没有边框和背景色的按钮。

图标按钮

使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。

按钮组

以按钮组的方式出现,常用于多项类似操作。

加载状态按钮

点击按钮来加载数据,并向用户反馈加载状态。

通过设置 loading 属性为 true 来显示加载中状态。

TIP

您可以使用 loading 插槽或 loadingIcon属性自定义您的loading图标

ps: loading 插槽优先级高于loadingIcon属性

调整尺寸

除了默认的大小,按钮组件还提供了几种额外的尺寸可供选择,以便适配不同的场景。

自定义颜色beta

您可以自定义按钮颜色。

我们将自动计算 hover 和 active 颜色。

Button API

Button 属性

属性名说明类型默认值
size尺寸string
type类型string
plain是否为朴素按钮booleanfalse
text2.2.0是否为文字按钮booleanfalse
bg2.2.0是否显示文字按钮背景颜色booleanfalse
link 2.2.1是否为链接按钮booleanfalse
round是否为圆角按钮booleanfalse
circle是否为圆形按钮booleanfalse
loading是否为加载中状态booleanfalse
loading-icon自定义加载中状态图标组件string / ComponentLoading
disabled按钮是否为禁用状态booleanfalse
icon图标组件string / Component
autofocus原生 autofocus 属性booleanfalse
native-type原生 type 属性stringbutton
auto-insert-space自动在两个中文字符之间插入空格boolean
color自定义按钮颜色, 并自动计算 hoveractive 触发后的颜色string
darkdark 模式, 意味着自动设置 color 为 dark 模式的颜色booleanfalse

Button 插槽

插槽名说明
default自定义默认内容
loading自定义加载中组件
icon自定义图标组件

Button 对外暴露的方法

属性名说明类型
ref按钮 html 元素Object
size按钮尺寸Object
type按钮类型Object
disabled按钮已禁用Object
shouldAddSpace是否在两个字符之间插入空格Object

ButtonGroup API

Button Group 属性

插槽名说明类型默认值
size用于控制该按钮组内按钮的大小string
type用于控制该按钮组内按钮的类型string

ButtonGroup 插槽

插槽名说明子标签
default自定义按钮组内容Button

源代码

组件文档

贡献者