Switch

Rules

Basic Example

const rule = {
    type:"switch",
    title:"On Sale",
    field:"is_show",
    value:"1",
    props: {
        checkedChildren:"1",
        unCheckedChildren:"0",
    },
}

Props Configuration Examples

With Text Description

const rule = {
    type:"switch",
    title:"Product Status",
    field:"status",
    value:true,
    props: {
        checkedChildren: "On Sale",
        unCheckedChildren: "Off Sale",
        checkedValue: true,
        unCheckedValue: false,
    },
}

Loading State

const rule = {
    type:"switch",
    title:"Auto Save",
    field:"autoSave",
    value:false,
    props: {
        loading: false,
        checkedChildren: "On",
        unCheckedChildren: "Off",
    },
}

Different Sizes

const rule = {
    type:"switch",
    title:"Notification Switch",
    field:"notification",
    value:true,
    props: {
        size: "small",
        checkedChildren: "On",
        unCheckedChildren: "Off",
    },
}

Events Examples

Listen to Switch Changes

const rule = {
    type:"switch",
    title:"On Sale",
    field:"is_show",
    value:"1",
    props: {
        checkedChildren:"1",
        unCheckedChildren:"0",
    },
    on: {
        change: (checked, event) => {
            console.log('Switch state changed:', checked, event);
        },
        click: (checked, event) => {
            console.log('Clicked switch:', checked, event);
        },
    },
}

Linkage Update Other Fields

const rule = [
    {
        type:"switch",
        title:"Enable Discount",
        field:"enableDiscount",
        value:false,
        props: {
            checkedChildren: "Enable",
            unCheckedChildren: "Disable",
        },
        inject: true,
        on: {
            change: ($inject, checked) => {
                // When discount is enabled, automatically set the default discount rate
                if (checked) {
                    $inject.api.setValue('discount', 0.9);
                } else {
                    $inject.api.setValue('discount', 1);
                }
            },
        },
    },
    {
        type:"input-number",
        title:"Discount Rate",
        field:"discount",
        props: {
            min: 0,
            max: 1,
            step: 0.1,
            precision: 2,
            disabled: false,
        },
    },
]

Complete configuration items: Ant-design-vue_Switch

value :Number | String

Props

Parameter	Description	Type	Default
autofocus	Component auto focus	boolean	false
checkedChildren	Content when checked	string|slot
checkedValue	Value when checked	boolean | string | number	true
disabled	Whether disabled	boolean	false
loading	Loading switch	boolean	false
size	Switch size, options: default small	string	default
unCheckedChildren	Content when unchecked	string|slot
unCheckedValue	Value when unchecked	boolean | string | number	false

Events

Event Name	Description	Callback Parameters
change	Callback function when changed	Function(checked: boolean | string | number, event: Event)
click	Callback function when clicked	Function(checked: boolean | string | number, event: Event)