常用的操作按钮。
基础用法#
使用 type
、plain
、round
和 circle
来定义按钮的样式。
DefaultPrimarySuccessInfoWarningDanger
PlainPrimarySuccessInfoWarningDanger
RoundPrimarySuccessInfoWarningDanger
禁用状态#
你可以使用 disabled
属性来定义按钮是否被禁用。
使用 disabled
属性来控制按钮是否为禁用状态。 该属性接受一个 Boolean
类型的值。
DefaultPrimarySuccessInfoWarningDanger
PlainPrimarySuccessInfoWarningDanger
链接按钮#
WARNING
type="text"
已被 废弃,将于版本 3.0.0 时 移除,请考虑切换至新的 API。
新的 API link
于 2.2.1 版本时添加,你可以使用 type
API 设置链接按钮的主题样式
Basic link button
plainprimarysuccessinfowarningdanger
Disabled link button
plainprimarysuccessinfowarningdanger
文字按钮#
TIP
文字按钮在现在有了全新的设计样式。 2.2.0 如果您想要使用老版样式的按钮,可以考虑使用 Link 组件。
API也已更新,由于 type
属性会同时控制按钮的样式, 因此我们通过一个新的 API text: boolean
来控制文字按钮。
没有边框和背景色的按钮。
Basic text button
plainprimarysuccessinfowarningdanger
Background color always on
plainprimarysuccessinfowarningdanger
Disabled text button
plainprimarysuccessinfowarningdanger
图标按钮#
使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。
使用 icon
属性来为按钮添加图标。 您可以在我们的 Icon 组件中找到所需图标。 通过向右方添加<i>
标签来添加图标, 你也可以使用自定义图标。
SearchUpload
按钮组#
以按钮组的方式出现,常用于多项类似操作。
使用 <el-button-group>
对多个按钮分组。
Previous PageNext Page
加载状态按钮#
点击按钮来加载数据,并向用户反馈加载状态。
通过设置 loading
属性为 true
来显示加载中状态。
TIP
您可以使用 loading
插槽或 loadingIcon
属性自定义您的loading图标
ps: loading
插槽优先级高于loadingIcon
属性
LoadingLoading
Loading
调整尺寸#
除了默认的大小,按钮组件还提供了几种额外的尺寸可供选择,以便适配不同的场景。
使用 size
属性额外配置尺寸,可使用 large
和small
两种值。
LargeDefaultSmallSearchSearchSearch
LargeDefaultSmallSearchSearchSearch
Tag2.3.4#
您可以自定义元素标签。例如,按钮,div,路由链接,nuxt链接。
button
div
自定义颜色beta#
您可以自定义按钮的颜色。
我们将自动计算按钮处于 hover 和 active 状态时的颜色。
DefaultPlainDisabledDisabled Plain
Button API#
Button Attributes#
属性名 | 说明 | 类型 | 默认值 |
size | 尺寸 | enum |
— |
type | 类型 | enum |
— |
plain | 是否为朴素按钮 | boolean |
false |
text 2.2.0 | 是否为文字按钮 | boolean |
false |
bg 2.2.0 | 是否显示文字按钮背景颜色 | boolean |
false |
link 2.2.1 | 是否为链接按钮 | boolean |
false |
round | 是否为圆角按钮 | boolean |
false |
circle | 是否为圆形按钮 | boolean |
false |
loading | 是否为加载中状态 | boolean |
false |
loading-icon | 自定义加载中状态图标组件 | string / Component |
Loading |
disabled | 按钮是否为禁用状态 | boolean |
false |
icon | 图标组件 | string / Component |
— |
autofocus | 原生 autofocus 属性 |
boolean |
false |
native-type | 原生 type 属性 | enum |
button |
auto-insert-space | 自动在两个中文字符之间插入空格 | boolean |
— |
color | 自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色 |
string |
— |
dark | dark 模式, 意味着自动设置 color 为 dark 模式的颜色 |
boolean |
false |
tag 2.3.4 | 自定义元素标签 | string / Component |
button |
Button Slots#
插槽名 | 说明 |
default | 自定义默认内容 |
loading | 自定义加载中组件 |
icon | 自定义图标组件 |
Button Exposes#
属性名 | 说明 | 类型 |
ref | 按钮 html 元素 | object |
size | 按钮尺寸 | object |
type | 按钮类型 | object |
disabled | 按钮已禁用 | object |
shouldAddSpace | 是否在两个字符之间插入空格 | object |
ButtonGroup API#
ButtonGroup Attributes#
插槽名 | 说明 | 类型 | 默认值 |
size | 用于控制该按钮组内按钮的大小 | enum |
— |
type | 用于控制该按钮组内按钮的类型 | enum |
— |
ButtonGroup Slots#
插槽名 | 说明 | 子标签 |
default | 自定义按钮组内容 | Button |