Radio 单选框

规则

基础示例

const rule = {
    type:"radio",
    title:"是否包邮",
    field:"is_postage",
    value:"0",
    options:[
        {value:"0",label:"不包邮",disabled:false},
        {value:"1",label:"包邮",disabled:true},
    ],
}

Props 配置示例

不同尺寸

const rule = {
    type:"radio",
    title:"商品状态",
    field:"status",
    value:"1",
    options:[
        {value:"1",label:"上架"},
        {value:"2",label:"下架"},
        {value:"3",label:"待审核"},
    ],
    props: {
        size: "small",
    }
}

禁用选项

const rule = {
    type:"radio",
    title:"支付方式",
    field:"payment",
    value:"1",
    options:[
        {value:"1",label:"在线支付",disabled:false},
        {value:"2",label:"货到付款",disabled:true},
        {value:"3",label:"余额支付",disabled:false},
    ],
}

Events 事件示例

监听选择变化

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

选择后联动更新

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

完整配置项:naive-ui_Radio

value :String | Number

Options

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

Props

名称	类型	默认值	说明
disabled	boolean	false	禁用状态
name	string	undefined	选项组内部 radio 元素的 name 属性
size	'small' | 'medium' | 'large'	'medium'	大小
on-update:value	(value: string) => void	undefined	发生变化时触发的回调方法