Switch 开关
规则
js
{
type:"switch",
title:"是否上架",
field:"is_show",
value:"1",
props: {
activeValue:"1",
inactiveValue:"0",
},
}
完整配置项:Element_Switch
value :Number | String
Props
属性名 | 说明 | 类型 | Default |
---|---|---|---|
disabled | 是否禁用 | boolean | false |
loading | 是否显示加载中 | boolean | false |
size | switch 的大小 | enum | '' |
width | switch 的宽度 | number / string | '' |
inlinePrompt | 无论图标或文本是否显示在点内,只会呈现文本的第一个字符 | boolean | false |
activeIcon | switch 状态为 on 时所显示图标,设置此项会忽略 active-text | string / Component | — |
inactiveIcon | switch 状态为 off 时所显示图标,设置此项会忽略 inactive-text | string / Component | — |
activeActionIcon | on 状态下显示的图标组件 | string / Component | — |
inactiveActionIcon | off 状态下显示的图标组件 | string / Component | — |
activeText | switch 打开时的文字描述 | string | '' |
inactiveText | switch 的状态为 off 时的文字描述 | string | '' |
activeValue | switch 状态为 on 时的值 | boolean / string / number | true |
inactiveValue | switch的状态为 off 时的值 | boolean / string / number | false |
name | switch 对应的 name 属性 | string | '' |
validateEvent | 是否触发表单验证 | boolean | true |
beforeChange | switch 状态改变前的钩子, 返回 false 或者返回 Promise 且被 reject 则停止切换 | Function | — |
id | input 的 id | string | — |
tabindex | input 的 tabindex | string / number | — |
ariaLabel | 等价于原生 input aria-label 属性 | string | — |
activeColor | 当在 on 状态时的背景颜色(推荐使用 CSS var --el-switch-on-color ) | string | '' |
inactiveColor | off 状态时的背景颜色(推荐使用 CSS var --el-switch-off-color ) | string | '' |
borderColor | 开关的边框颜色 ( 推荐使用 CSS var --el-switch-border-color ) | string | '' |
label | 等价于原生 input aria-label 属性 | string | — |
Events
事件名 | 说明 | Type |
---|---|---|
change | switch 状态发生变化时的回调函数 | Function |
Slots
名称 | 说明 |
---|---|
active-action | 自定义 active 行为 |
inactive-action | 自定义 inactive 行为 |