Switch 开关

规则

基础示例

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

Props 配置示例

带文字描述

const rule = {
    type:"switch",
    title:"商品状态",
    field:"status",
    value:true,
    props: {
        activeText: "上架",
        inactiveText: "下架",
        activeValue: true,
        inactiveValue: false,
    },
}

带图标

const rule = {
    type:"switch",
    title:"是否启用",
    field:"enabled",
    value:true,
    props: {
        activeIcon: "Check",
        inactiveIcon: "Close",
    },
}

加载状态

const rule = {
    type:"switch",
    title:"自动保存",
    field:"autoSave",
    value:false,
    props: {
        loading: false,
        activeText: "开启",
        inactiveText: "关闭",
    },
    on: {
        change: (value) => {
            // 切换时显示加载状态
            // 需要通过其他方式控制 loading 状态
        },
    },
}

不同尺寸

const rule = {
    type:"switch",
    title:"通知开关",
    field:"notification",
    value:true,
    props: {
        size: "large",
        activeText: "开启",
        inactiveText: "关闭",
    },
}

自定义宽度

const rule = {
    type:"switch",
    title:"自动续费",
    field:"autoRenew",
    value:false,
    props: {
        width: 60,
        activeText: "是",
        inactiveText: "否",
    },
}

Events 事件示例

监听开关变化

const rule = {
    type:"switch",
    title:"是否上架",
    field:"is_show",
    value:"1",
    props: {
        activeValue:"1",
        inactiveValue:"0",
        activeText: "上架",
        inactiveText: "下架",
    },
    on: {
        change: (value) => {
            console.log('开关状态改变:', value);
        },
    },
}

切换前确认

const rule = {
    type:"switch",
    title:"删除商品",
    field:"allowDelete",
    value:false,
    props: {
        activeText: "允许",
        inactiveText: "禁止",
        beforeChange: () => {
            // 返回 Promise，可以用于异步确认
            return new Promise((resolve) => {
                if (confirm('确定要修改删除权限吗？')) {
                    resolve(true);
                } else {
                    resolve(false);
                }
            });
        },
    },
}

联动更新其他字段

const rule = [
    {
        type:"switch",
        title:"启用折扣",
        field:"enableDiscount",
        value:false,
        props: {
            activeText: "启用",
            inactiveText: "禁用",
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // 启用折扣时，自动设置默认折扣率
                if (value) {
                    $inject.api.setValue('discount', 0.9);
                } else {
                    $inject.api.setValue('discount', 1);
                }
            },
        },
    },
    {
        type:"input-number",
        title:"折扣率",
        field:"discount",
        props: {
            min: 0,
            max: 1,
            step: 0.1,
            precision: 2,
            disabled: false,
        },
    },
]

完整配置项: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 行为