e-button

样式按钮组插槽

• 属性
• adaptor - 适配器
• item - 属性
• UI - 示例

描述

1. 动态控制字段 可通过 schema assign category

2. 通过 adaptor 切换对应类按钮组件 radio card custom

3. 通过 type plain round circle 来定义按钮的样式

4. 功能属性配置

   1. toggle 按钮点击轮空，具体看示例代码
   2. delay 防抖，控制重复点击间隔

5. 通过配置 adaptor 来适配不同的按钮列表样式

6. 样式相关

   1. 通过配置 wrapperClass activeClass 来设置按钮样式与按钮激活的样式
   2. 通过配置 iconClass labelClass 来定义按钮外的其他样式

7. 参数可参考"https://www.tailwindcss.cn/docs/hover-focus-and-other-states"

属性

<props> Props

参数名	描述	类型	默认值
adaptor	适配器 card custom radio	string	undefined
model-value (v-model)	当前激活按钮的 prop	string | number	-
schema	字段列表	Array<any>	[]
assign	schema 数据	Array<any>	[]
category	分组	string | number | boolean	undefined
wrapper-class	行样式	string	-
button-class	按钮样式	string	-
icon-class	图标样式	string	-
icon-height	图标高度	number	22
label-class	标签样式	string	-
active-class	激活状态样式	string	-
group	是否启用组样式	boolean | string	false
plain	是否朴素按钮	boolean	false
link	是否为链接按钮	boolean	false
text	是否为文字按钮	boolean	false
circle	圆	boolean	false
round	倒角	boolean	false
type	类型 'primary'| 'success'| 'warning'| 'danger'| 'info'	string	-
size	尺寸 large default small	string	default
custom	是否启用自定义样式	boolean	false
toggle	是否启用关闭自己	boolean	false
extra	radio 中使用 按钮	Array<any>	-
extra-entity	radio 子按钮实体	object	-
delay	防抖	number	300

category 分组

assign 数据拓展

若prop相同，则assign会覆盖schema中的数据

modelValue 默认激活按钮

toggle 是否启用关闭自己

delay 延时，默认300ms

activeClass、wrapperClass

wrapperClass 设置按钮样式 activeClass 按钮激活时样式

adaptor 适配器

adaptor-radio

adaptor-card

custom 自定义样式

Events 事件

active

返回的数据

const evt = {active:'', data:[{}, {}], prop:'', value: false  }

schema-item-属性

const schema = [ {label: '', prop: '',type: '', }, {label: '', prop: '', type: '', } ]

常用属性

1. label 标签文本
2. prop 字段名（实体的键名）
3. type 按钮样式类型 （primary | success | info | warning | danger）
4. plain 是否为朴素按钮
5. round 是否为圆角按钮
6. circle 是否为圆形按钮
7. icon 带图标按钮
8. loading 加载样式
9. disable 禁用按钮
10. size 按钮尺寸
11. category 按钮分组

常用功能

1. cycle 按钮轮换

cycle 按钮轮换

普通按钮、朴素按钮、圆角按钮、圆形按钮

size 尺寸

文字按钮、图标按钮（目前存在问题）、加载中按钮、禁用按钮

icon

ui-示例

UI

二级工具栏

便签按钮

左侧导航按钮

按钮样式

右侧图标水印