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:"delivery",
    value:"1",
    options:[
        {value:"1",label:"快递配送"},
        {value:"2",label:"门店自提"},
        {value:"3",label:"同城配送"},
    ],
    props: {
        optionType: "button",
        buttonStyle: "solid",
    },
}

不同尺寸

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

Events 事件示例

监听选择变化

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

选择后联动更新

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

完整配置项:Ant-design-vue_Radio

value :String | Number

Options

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

Props

参数	说明	类型	默认值
buttonStyle	RadioButton 的风格样式，目前有描边和填色两种风格	outline	solid
disabled	禁选所有子单选器	boolean	false
name	RadioGroup 下所有 input[type="radio"] 的 name 属性	string	-
options	以配置形式设置子元素	string[] | number[] | Array<{ label: string value: string disabled?: boolean }>	-
optionType	用于设置 Radio options 类型	default	button
size	大小，只对按钮样式生效	large	default

Events

事件名称	说明	回调参数
change	选项变化时的回调函数	Function(e:Event)