提供按钮功能,按钮支持主题颜色、禁用、圆角、镂空边框、定制化 loading 等特性。
# 基础示例
通过 label
属性设置按钮文字。
# 主题颜色
通过组件的 theme
属性设置按钮的主题颜色。
# 按钮禁用
通过给组件添加 disabled
属性,可以将按钮设置为禁用状态。
# 镂空按钮
通过给组件添加 outline
属性,可以将按钮设置为镂空。支持与 theme
一起使用设置不同主题颜色的镂空效果。
# 图标按钮
设置组件的 icon
属性即可,icon
列表可以参考 Engage 组件库的 EIcon
组件。默认将 Icon 放在按钮的左侧,可以设置 iconRight
属性将 Icon 放在按钮的右侧。
# 圆角按钮
通过设置组件的 round
属性可以将组件设置为圆角。
# 定制化 loading
loading 效果默认为组件库的 ESpinner
进度组件,通过向组件的 loading
slot 注入内容支持定制化的 loading 效果。当用户点击按钮后,事件处理函数未执行完成前,将会显示 slot 中的内容。
# 注意事项
- 组件的
click
的事件处理函数必须是一个 async 函数或者返回一个 Promise 的函数,否则将会不显示 loading 效果。
# EButton
# Props
Name | Description | Type | Required | Default |
---|---|---|---|---|
tag | HTML Tag | String | false | button |
theme | 主题颜色,一旦设置会将背景色改为主题色,同时将前景色改为白色 | String | false | - |
label | 按钮文字 | String / Number | false | - |
disabled | 是否禁用 | Boolean | false | - |
round | 是否显示为圆角,圆角按钮最小宽度跟它的高度一致(此时为圆形) | Boolean | false | - |
outline | 是否显示为镂空边框样式 | Boolean | false | - |
icon | 左侧 Icon 名称,见 EIcon | String | false | - |
iconRight | 是否将 Icon 放到右侧 | Boolean | false | - |
# Slots
Name | Description | Default Slot Content |
---|---|---|
loading | 当点击事件处理过程中,定制化 loading 内容与样式 | - |
default | - | - |