Checkbox 多选框

规则

基础示例

const rule = {
    type: 'checkbox',
    title: '多选框',
    field: 'checkbox',
    value: ['1'],
    props: {
        options: [
            {
                text: '复选框1',
                value: '1',
            },
            {
                text: '复选框2',
                value: '2',
            },
        ]
    }
}

Props 配置示例

限制选择数量

const rule = {
    type: 'checkbox',
    title: '商品标签',
    field: 'tags',
    value: ['1'],
    props: {
        options: [
            { text: '热销', value: '1' },
            { text: '新品', value: '2' },
            { text: '推荐', value: '3' },
        ],
        max: 3,
    }
}

横向排列

const rule = {
    type: 'checkbox',
    title: '商品标签',
    field: 'tags',
    value: [],
    props: {
        options: [
            { text: '热销', value: '1' },
            { text: '新品', value: '2' },
            { text: '推荐', value: '3' },
        ],
        direction: 'horizontal',
    }
}

自定义样式

const rule = {
    type: 'checkbox',
    title: '商品标签',
    field: 'tags',
    value: [],
    props: {
        options: [
            { text: '热销', value: '1' },
            { text: '新品', value: '2' },
        ],
        shape: 'square',
        checkedColor: '#ee0a24',
        iconSize: '24px',
    }
}

Events 事件示例

监听选择变化

const rule = {
    type: 'checkbox',
    title: '商品标签',
    field: 'tags',
    value: [],
    props: {
        options: [
            { text: '热销', value: '1' },
            { text: '新品', value: '2' },
            { text: '推荐', value: '3' },
        ],
    },
    on: {
        change: (names) => {
            console.log('选择值改变:', names);
        },
    },
}

选择后联动更新

const rule = [
    {
        type: 'checkbox',
        title: '商品标签',
        field: 'tags',
        value: [],
        props: {
            options: [
                { text: '热销', value: '1' },
                { text: '新品', value: '2' },
                { text: '推荐', value: '3' },
            ],
        },
        inject: true,
        on: {
            change: ($inject, names) => {
                // 根据选择的标签数量，自动设置商品状态
                if (names.length >= 2) {
                    $inject.api.setValue('status', 'active');
                } else {
                    $inject.api.setValue('status', 'inactive');
                }
            },
        },
    },
    {
        type: 'input',
        title: '商品状态',
        field: 'status',
        props: {
            disabled: true,
        },
    },
]

完整配置项:Vant_Checkbox

value :Array

Options

字段名	说明	字段类型	是否必填	默认值
value	参数值	String,Number	true	-
text	字段别名	String	true	-
disabled	设置为禁用状态	Boolean	false	false

Props

参数	说明	类型	默认值
disabled	是否禁用所有复选框	boolean	false
max	最大可选数，0 为无限制	number | string	0
direction	排列方向，可选值为 horizontal	string	vertical
icon-size	所有复选框的图标大小，默认单位为 px	number | string	20px
checked-color	所有复选框的选中状态颜色	string	#1989fa
shape	形状，可选值为 square	string	round

Events

事件名	说明	回调参数
change	当绑定值变化时触发的事件	names: any[]