Switch

Rule

Basic Example

const rule = {
    type: 'switch',
    title: 'Switch',
    field: 'switch',
    value: 1,
    props: {
        activeValue: 1,
        inactiveValue: 0
    }
}

Props Configuration Examples

Custom Color

const rule = {
    type: 'switch',
    title: 'Product Status',
    field: 'status',
    value: true,
    props: {
        activeValue: true,
        inactiveValue: false,
        activeColor: '#07c160',
        inactiveColor: '#ee0a24',
    }
}

Custom Size

const rule = {
    type: 'switch',
    title: 'Notification Switch',
    field: 'notification',
    value: true,
    props: {
        size: '24px',
    }
}

Loading State

const rule = {
    type: 'switch',
    title: 'Auto Save',
    field: 'autoSave',
    value: false,
    props: {
        loading: false,
    }
}

Events Examples

Handle Switch Changes

const rule = {
    type: 'switch',
    title: 'Is Listed',
    field: 'is_show',
    value: 1,
    props: {
        activeValue: 1,
        inactiveValue: 0,
    },
    on: {
        change: (value) => {
            console.log('Switch state changed:', value);
        },
        click: (event) => {
            console.log('Switch clicked:', event);
        },
    },
}

Linkage Update Other Fields

const rule = [
    {
        type: 'switch',
        title: 'Enable Discount',
        field: 'enableDiscount',
        value: false,
        props: {
            activeValue: true,
            inactiveValue: false,
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // Auto-set default discount rate when discount is enabled
                if (value) {
                    $inject.api.setValue('discount', 0.9);
                } else {
                    $inject.api.setValue('discount', 1);
                }
            },
        },
    },
    {
        type: 'stepper',
        title: 'Discount Rate',
        field: 'discount',
        props: {
            min: 0,
            max: 1,
            step: 0.1,
            decimalLength: 2,
            disabled: false,
        },
    },
]

Complete configuration items:Vant_Switch

value :Number | String | Boolean

Props

Parameter	Description	Type	Default Value
loading	Whether it is in loading state	boolean	false
disabled	Whether it is in disabled state	boolean	false
size	Switch button size, default unit is px	number | string	26px
active-color	Background color when on	string	#1989fa
inactive-color	Background color when off	string	rgba(120, 120, 128, 0.16)
active-value	Value when on	any	true
inactive-value	Value when off	any	false

Events

Event Name	Description	Callback Parameters
change	Triggered when switch state changes	value: any
click	Triggered when clicked	event: MouseEvent