开关 表单
组件 ID: switch
这是一个标准的 SunForm 表单组件,支持可视化配置与低代码生成。
JSON 配置示例
直接复制以下 JSON 到配置文件中即可使用。
{
"type": "switch",
"props": {
"label": "开关",
"value": false,
"labelAlign": "left",
"labelPosition": "top",
"valueStr": null,
"labelWidth": "120upx",
"hide": false,
"direction": "row",
"zdname": "",
"hasLabel": true,
"required": false,
"readonly": false,
"disabled": false,
"activeColor": "#1989fa",
"inactiveColor": "#dcdfe6",
"btnColor": "#FFFFFF"
}
}
属性配置 (Props)
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
label |
string | 开关 | 标签文本/标题 |
labelAlign |
string | left | 标签对齐方式 |
labelPosition |
string | top | 标签位置 (top/left) |
value |
boolean | false | 表单值 / 绑定值 |
valueStr |
any | null | 暂无描述 |
labelWidth |
string | 120upx | 标签宽度 |
hide |
boolean | false | 是否隐藏该组件 |
direction |
string | row | 排列方向 (row/column) |
zdname |
string | - | 暂无描述 |
hasLabel |
boolean | true | 暂无描述 |
required |
boolean | false | 是否必填 |
readonly |
boolean | false | 是否只读 |
disabled |
boolean | false | 是否禁用 |
activeColor |
string | #1989fa | 颜色值 |
inactiveColor |
string | #dcdfe6 | 颜色值 |
btnColor |
string | #FFFFFF | 颜色值 |
size |
number | 40 | 组件尺寸 (small/default/large) |
customStyle |
string | - | 暂无描述 |
activeValue |
boolean | true | 暂无描述 |
inactiveValue |
boolean | false | 暂无描述 |
activeText |
string | - | 暂无描述 |
inactiveText |
string | - | 暂无描述 |
round |
string | 8 | 暂无描述 |
onCreated |
any | null | 组件创建时触发的事件 |
onMounted |
any | null | 组件挂载后触发的事件 |
onChange |
any | null | 事件回调 |