radio-group props

属性	描述	类型	默认值
value	要绑定的值，可通过v-model绑定	array	-
horizontal	是否要横向展示	boolean	false
column	横向展示的列数，当 horizontal 为真的时候，这个值必须填	Number	-
options	选项列表	array	[]
labelPosition	文案位置	string	right
optionValueKey	选项value的key值	string	value
optionLabelKey	选项label的key值	string	label

radio-group options 的属性

属性	类型	描述
value	string	此值可以通过optionValueKey设置
label	string	此值可以通过optionLabelKey设置
disabled	boolean	表示是否禁用某个radio

radio-group slot

名称	描述
default	默认的插槽

radio props

属性	描述	类型	默认值
value	要绑定的值，可通过v-model绑定	boolean, string, number	-
labelPosition	文案位置	string	right
option	选项配置	string, number, object	{}
disabled	是否禁用	boolean	false
optionValueKey	选项value的key值	string	value
optionLabelKey	选项label的key值	string	label

radio option 的属性

属性	类型	描述
value	string	此值可以通过optionValueKey设置
label	string	此值可以通过optionLabelKey设置
disabled	boolean	表示是否禁用某个radio

radio slot

名称	描述
default	默认的插槽，可以替换文案

例子代码

基础icon

<template>
  <div>
    <div class="items">
      <p class="item_title">radio的基础用法</p>
      <vill-radio-group
        v-model="val_1"
        :options="options1"
        labelPosition="left"
        optionLabelKey="text"
      />
      <p class="item_change">{{val_1}}</p>
    </div>
    <div class="items">
      <p class="item_title">radio的横向排列</p>
      <vill-radio-group
        v-model="val_2"
        :options="options2"
        horizontal
        :column="2"
      />
      <p class="item_change">{{val_2}}</p>
    </div>
    <div class="items">
      <p class="item_title">radio插槽</p>
      <vill-radio-group
      >
        <vill-radio v-model="val_3" option="1">华为</vill-radio>
        <vill-radio v-model="val_3" option="2">中兴</vill-radio>
        <vill-radio v-model="val_3" option="3" disabled>苹果</vill-radio>
      </vill-radio-group>
      <p class="item_change">{{val_3}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      val_1: 4,
      options1: [{
        value: 1,
        text: '苹果'
      }, {
        value: 2,
        text: '香蕉'
      }, {
        value: 3,
        text: '橘子'
      }, {
        value: 4,
        text: '菠萝',
        disabled: true
      }],
      val_2:1,
      options2: [{
        value: 1,
        label: '苹果'
      }, {
        value: 2,
        label: '香蕉'
      }, {
        value: 3,
        label: '橘子'
      }, {
        value: 4,
        label: '菠萝'
      }],
      val_3: ''
    }
  }
}
</script>