单选框(vRadio)

单组件引入

import <name> from ‘vucc/radio’;

示例


单radio:



横向:



横向使用别名:



纵向/多选




代码 V

<v-radio :data="commonListData" :result-list.sync="radioResultList"></v-radio>
<v-radio :data="commonListData" :result-list.sync="radioResultList"></v-radio>
<v-radio :data="commonListData2" :as-value="'name'" :as-label="'desc'" v-model="radioValue"></v-radio>
<v-radio :data="commonListData" :result-list.sync="radioMulResultList" :is-vertical="true" :is-multiple="true"></v-radio>


data() {
    return {
        value: true,
        commonListData: [{
            value: 0,
            label: 'value0'
        }, {
            value: 1,
            label: '<a>111</a>'
        }, {
            value: 2,
            label: 'value1',
            isDisabled: true
        }],
        commonListData2: [{
            name: 0,
            desc: 'value0'
        }, {
            name: 1,
            desc: '<a>111</a>'
        }, {
            name: 2,
            desc: 'value1',
            isDisabled: true
        }],
        radioValue: 0,
        // radio
        radioResultList: [1],
        radioMulResultList: [0, '']
    }
},



属性

参数 说明 类型 可选值 默认值
data radio的基础渲染数据 Array<Object> - []
resultList 单选框的结果数组,用于模拟多选的单选框 Array - -
value 单选框的值 Number/String - -
isVertical 单选框的排列方向是否为垂直方向 Boolean - false
isMultiple 单选框组是否可以多选 Boolean - false
← 复选框(vButtonGroup) 选择框(vSelect) →