cv-radio-group 单选框

简要

单项选择
普通单选，一般和表单配合使用，默认为实心白色背景。

示例

::: demo

<template>
  <div style="width: 520px">
    <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px">
      <h1>radio 组件</h1>
      <h3>json模式</h3>
      <cv-radio-group v-model="formData.radiobase1" :dataLists="radioData" />
      <h3>插槽模式</h3>
      <cv-radio-group v-model="formData.radiobase11">
        <cv-radio-opt-base value="3">备选项</cv-radio-opt-base>
        <cv-radio-opt-base value="6">备选项</cv-radio-opt-base>
        <cv-radio-opt-base value="9">备选项</cv-radio-opt-base>
      </cv-radio-group>
      <h3>自定义字段</h3>
      <cv-radio-group v-model="formData.radiobase2" :dataLists="radioDataStr" :dataField="{ label: 'XXX', value: 'val' }" />

      <cv-btn-base @click="hanldeSubmit">按钮</cv-btn-base>

      <p>设置选项 dataLists</p>
      <cv-radio-group v-model="formData.radiobase1" :dataLists="radioData1" />

      <p>禁用和选中某项 disabled: true / checked: true</p>
      <cv-radio-group v-model="formData.radiobase2" :dataLists="radioData2" />

      <p>配置数据格式 dataField</p>
      <cv-radio-group v-model="formData.radiobase3" :dataLists="radioData3" :dataField="{ label: 'text', value: 'val' }" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        radiobase1: '',
        radiobase2: 3,
        radiobase1: '',
        radiobase2: ''
      },
      // checked为真选中当前选项
      radioData: [
        { label: 'a', value: '1', checked: true },
        { label: 'b', value: '2' },
        { label: 'c', value: '3' }
      ],
      radioDataStr: [
        { XXX: 'a', val: 1, disabled: true },
        { XXX: 'b', val: 2, checked: true },
        { XXX: 'c', val: 3 }
      ],
      radioData1: [
        { label: 'A', value: '1' },
        { label: 'B', value: '2' },
        { label: 'C', value: '3' },
        { label: 'D', value: '4' }
      ],
      radioData2: [
        { label: 'a', value: '1' },
        { label: 'b', value: '2', disabled: true },
        { label: 'c', value: '3' },
        { label: 'D', value: '4', checked: true }
      ],
      radioData3: [
        { text: 'A', val: '1' },
        { text: 'B', val: '2' },
        { text: 'C', val: '3' },
        { text: 'D', val: '4' }
      ]
    };
  },
  methods: {
    hanldeSubmit() {
      console.log('最后的formData', this.formData);
    }
  }
};
</script>

:::

属性

属性名	类型	默认值	说明	可选值
dataLists	Array	-	值	-
dataField	Object	-		-
label	String	-	字段名	-
labelWidth	String	80px	字段区域宽度，上下排列无效	-
v-model	String	-	数据双向绑定	-
tip	String	-	字段提示/说明	-
col	Number	24	栅格在一行中占据的宽度比，默认占满一行	-
offset	Number	0	左侧间隔的栏数	-
rules	String	-	验证规则	-
size	String	-	尺寸	medium / small / mini
disabled	Boolean	-	禁用选项	-

• [ dataLists ] 说明
  设置选项，默认格式为 {label:"选项1",value:"1"} ，label 作为选项名，value 作为选中的返回值

• [ dataField ] 说明
  自定数据字段，如果你的数据是这种格式 {text:"选项1",val:"1"} ，只需要用该属性 传入 {label:"text",value:"val"} 组件会将 text 作为 label ，val 作为 value 进行渲染

• [ rules ] 内置规则

规则	说明
require	是否必填（字段名前显示星号）