Skip to content

Switch 开关

规则

js
{
    type:"switch",
    title:"是否上架",
    field:"is_show",
    value:"1",
    props: {
        activeValue:"1",
        inactiveValue:"0",
    },
}

完整配置项:Element_Switch

value :Number | String

Props

属性名说明类型Default
disabled是否禁用booleanfalse
loading是否显示加载中booleanfalse
sizeswitch 的大小enum''
widthswitch 的宽度number / string''
inlinePrompt无论图标或文本是否显示在点内,只会呈现文本的第一个字符booleanfalse
activeIconswitch 状态为 on 时所显示图标,设置此项会忽略 active-textstring / Component
inactiveIconswitch 状态为 off 时所显示图标,设置此项会忽略 inactive-textstring / Component
activeActionIconon状态下显示的图标组件string / Component
inactiveActionIconoff状态下显示的图标组件string / Component
activeTextswitch 打开时的文字描述string''
inactiveTextswitch 的状态为 off 时的文字描述string''
activeValueswitch 状态为 on 时的值boolean / string / numbertrue
inactiveValueswitch的状态为 off 时的值boolean / string / numberfalse
nameswitch 对应的 name 属性string''
validateEvent是否触发表单验证booleantrue
beforeChangeswitch 状态改变前的钩子, 返回 false 或者返回 Promise 且被 reject 则停止切换Function
idinput 的 idstring
tabindexinput 的 tabindexstring / number
ariaLabel等价于原生 input aria-label 属性string
activeColor当在 on 状态时的背景颜色(推荐使用 CSS var --el-switch-on-color )string''
inactiveColoroff 状态时的背景颜色(推荐使用 CSS var --el-switch-off-color )string''
borderColor开关的边框颜色 ( 推荐使用 CSS var --el-switch-border-color )string''
label等价于原生 input aria-label 属性string

Events

事件名说明Type
changeswitch 状态发生变化时的回调函数Function

Slots

名称说明
active-action自定义 active 行为
inactive-action自定义 inactive 行为

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用