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 属性

属性说明类型可选值默认值
size尺寸stringlarge / default /small
type类型stringprimary / success / warning / danger / info / text
plain是否为朴素按钮booleanfalse
text2.2.0是否为文字按钮booleanfalse
bg 2.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 / submit / resetbutton
auto-insert-space自动在两个中文字符之间插入空格boolean

Button 插槽

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

Button-Group 属性

属性说明类型可选值默认值
size用于控制该按钮组内按钮的大小string与按钮的大小相同
type用于控制该按钮组内按钮的类型string与按钮的类型一致

Button-Group 插槽

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

源代码

组件文档

贡献者