提供按钮功能,按钮支持主题颜色、禁用、圆角、镂空边框、定制化 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 - -