Switch 开关
该组件是低代码平台中用于在两种状态之间快速切换的表单项,基于 Element Plus 的 <el-switch> 封装,支持自定义宽高、图标、文字、激活/关闭值及切换拦截逻辑,并深度集成表单容器(<el-form>)的数据绑定与校验体系。
基础属性
| 属性 | 类型 | 说明 |
|---|---|---|
宽度 width | string | 开关整体宽度(支持 CSS 单位,如 40px、2rem) |
激活状态图标 activeIcon | string | 开启时显示的图标(如 'ep:check') |
关闭状态图标 inactiveIcon | string | 关闭时显示的图标(如 'ep:close') |
激活状态文字 activeText | string | 开启时显示的文字(如 "开") |
关闭状态文字 inactiveText | string | 关闭时显示的文字(如 "关") |
激活状态值 activeValue | function | 返回开关开启时绑定的值(默认返回 true,可为任意类型如 'Y'、1 等) |
关闭状态值 inactiveValue | function | 返回开关关闭时绑定的值(默认返回 false,可为 'N'、0 等) |
状态改变前函数 beforeChange | function | $args[0] 为即将切换到的目标值(非当前值),返回 false 可阻止切换(支持异步) |
| 表单项基础配置 | — | 包含标签宽度、布局控制等通用表单项设置(来自 formItemBaseDefine) |
⚠️ 注意:
activeValue/inactiveValue决定了表单实际提交的值,而非固定true/false。- 自定义值映射(如后端要求传
'enabled'/'disabled')
高级属性
| 属性 | 类型 | 说明 |
|---|---|---|
| 表单项高级配置 | — | 包含字段名(prop)、标签文本(label)等核心绑定配置(来自 formItemAdvDefine) |
事件
| 事件 | 触发时机 | 说明 |
|---|---|---|
change | 开关状态切换完成时 | 返回当前绑定的值(即 activeValue 或 inactiveValue 的结果) |
