Switch 开关

规则

基础示例

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

Props 配置示例

带文字描述

const rule = {
    type:"switch",
    title:"商品状态",
    field:"status",
    value:true,
    props: {
        checkedChildren: "上架",
        unCheckedChildren: "下架",
        checkedValue: true,
        unCheckedValue: false,
    },
}

加载状态

const rule = {
    type:"switch",
    title:"自动保存",
    field:"autoSave",
    value:false,
    props: {
        loading: false,
        checkedChildren: "开启",
        unCheckedChildren: "关闭",
    },
}

不同尺寸

const rule = {
    type:"switch",
    title:"通知开关",
    field:"notification",
    value:true,
    props: {
        size: "small",
        checkedChildren: "开启",
        unCheckedChildren: "关闭",
    },
}

Events 事件示例

监听开关变化

const rule = {
    type:"switch",
    title:"是否上架",
    field:"is_show",
    value:"1",
    props: {
        checkedChildren:"1",
        unCheckedChildren:"0",
    },
    on: {
        change: (checked, event) => {
            console.log('开关状态改变:', checked, event);
        },
        click: (checked, event) => {
            console.log('点击开关:', checked, event);
        },
    },
}

联动更新其他字段

const rule = [
    {
        type:"switch",
        title:"启用折扣",
        field:"enableDiscount",
        value:false,
        props: {
            checkedChildren: "启用",
            unCheckedChildren: "禁用",
        },
        inject: true,
        on: {
            change: ($inject, checked) => {
                // 启用折扣时，自动设置默认折扣率
                if (checked) {
                    $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,
        },
    },
]

完整配置项:Ant-design-vue_Switch

value :Number | String

Props

参数	说明	类型	默认值
autofocus	组件自动获取焦点	boolean	false
checkedChildren	选中时的内容	string|slot
checkedValue	选中时的值	boolean | string | number	true
disabled	是否禁用	boolean	false
loading	加载中的开关	boolean	false
size	开关大小，可选值：default small	string	default
unCheckedChildren	非选中时的内容	string|slot
unCheckedValue	非选中时的值	boolean | string | number	false

Events

事件名称	说明	回调参数
change	变化时回调函数	Function(checked: boolean | string | number, event: Event)
click	点击时回调函数	Function(checked: boolean | string | number, event: Event)