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: {
        type: "button",
        size: "default",
    },
}

不同尺寸

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: {
        change: (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: {
            change: ($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,
        },
    },
]

完整配置项:Element_Radio

value :String | Number

Options

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

Props

属性名	说明	类型	默认值
size	单选框按钮或边框按钮的大小	string	default
type	多选框类型	'button'| 'radio'	-
disabled	是否禁用	boolean	false
validate-event	输入时是否触发表单的校验	boolean	true
textColor	按钮形式的 Radio 激活时的文本颜色	string	#ffffff
fill	按钮形式的 Radio 激活时的填充色和边框色	string	#409eff
ariaLabel	与 RadioGroup 中的 aria-label 属性相同	string	—
name	原生 name 属性	string	—
id	原生 id 属性	string	—
label	与 RadioGroup 中的 aria-label 属性相同	string	—

Events

事件名	说明	类型
change	绑定值变化时触发的事件	Function