Radio 单选框

规则

基础示例

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

Props 配置示例

横向排列

const rule = {
    type: 'radio',
    title: '配送方式',
    field: 'delivery',
    value: '1',
    props: {
        options: [
            { text: '快递配送', value: '1' },
            { text: '门店自提', value: '2' },
            { text: '同城配送', value: '3' },
        ],
        direction: 'horizontal',
    }
}

自定义样式

const rule = {
    type: 'radio',
    title: '商品状态',
    field: 'status',
    value: '1',
    props: {
        options: [
            { text: '上架', value: '1' },
            { text: '下架', value: '2' },
        ],
        shape: 'square',
        checkedColor: '#ee0a24',
        iconSize: '24px',
    }
}

Events 事件示例

监听选择变化

const rule = {
    type: 'radio',
    title: '配送方式',
    field: 'delivery',
    value: '1',
    props: {
        options: [
            { text: '快递配送', value: '1' },
            { text: '门店自提', value: '2' },
            { text: '同城配送', value: '3' },
        ],
    },
    on: {
        change: (name) => {
            console.log('选择值改变:', name);
        },
    },
}

选择后联动更新

const rule = [
    {
        type: 'radio',
        title: '配送方式',
        field: 'delivery',
        value: '1',
        props: {
            options: [
                { text: '快递配送', value: '1' },
                { text: '门店自提', value: '2' },
                { text: '同城配送', value: '3' },
            ],
        },
        inject: true,
        on: {
            change: ($inject, name) => {
                // 根据配送方式自动设置运费
                const freightMap = {
                    '1': 10,
                    '2': 0,
                    '3': 5,
                };
                $inject.api.setValue('freight', freightMap[name] || 0);
            },
        },
    },
    {
        type: 'stepper',
        title: '运费',
        field: 'freight',
        props: {
            disabled: true,
        },
    },
]

完整配置项:Vant_Radio

value :String | Number

Options

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

Props

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

Events

事件名	说明	回调参数
change	当绑定值变化时触发的事件	name: string