Switch 开关

规则

基础示例

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

Props 配置示例

自定义颜色

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

自定义尺寸

const rule = {
    type: 'switch',
    title: '通知开关',
    field: 'notification',
    value: true,
    props: {
        size: '24px',
    }
}

加载状态

const rule = {
    type: 'switch',
    title: '自动保存',
    field: 'autoSave',
    value: false,
    props: {
        loading: false,
    }
}

Events 事件示例

监听开关变化

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

联动更新其他字段

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

完整配置项:Vant_Switch

value :Number | String | Boolean

Props

参数	说明	类型	默认值
loading	是否为加载状态	boolean	false
disabled	是否为禁用状态	boolean	false
size	开关按钮的尺寸，默认单位为 px	number | string	26px
active-color	打开时的背景色	string	#1989fa
inactive-color	关闭时的背景色	string	rgba(120, 120, 128, 0.16)
active-value	打开时对应的值	any	true
inactive-value	关闭时对应的值	any	false

Events

事件名	说明	回调参数
change	开关状态切换时触发	value: any
click	点击时触发	event: MouseEvent