cv-radio-opt-base 单选普通样式

简要

本组件用于性别选择
性别单选框，一般和表单配合使用，默认为实心白色背景。

示例

<template>
  <view class="content">
    <view class="components-title">
      <view class="components-title-t">cv-radio-opt-base</view>
      <view class="components-title-d">普通样式</view>
    </view>
    <cv-form-base ref="refFormBase" :rules="formRules" :model="formData" style="padding: 0 10px">
      <cv-form-item label="单选标签" labelWidth="75" required>
        <cv-radio-group v-model="formData.radio1" align="right">
          <cv-radio-opt-base :value="item.value" v-for="(item, index) in radioLists" :key="index">
            {{ item.text }}
          </cv-radio-opt-base>
        </cv-radio-group>
        <template v-slot:tip>您需要选择一个最喜爱的水果</template>
      </cv-form-item>
      <cv-form-item label="单选标签" labelWidth="75" labelPosition="top" required>
        <cv-radio-group v-model="formData.radio2">
          <cv-radio-opt-base value="1111">单选1</cv-radio-opt-base>
          <cv-radio-opt-base value="2222">单选2</cv-radio-opt-base>
          <cv-radio-opt-base value="3333">单选3</cv-radio-opt-base>
        </cv-radio-group>
        <template v-slot:tip>您需要选择一个最喜爱的水果</template>
      </cv-form-item>
    </cv-form-base>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formRules: {},
      formData: {
        radio1: '1'
      },
      radioLists: []
    };
  },
  onLoad() {
    setTimeout(() => {
      this.$testReqMock().then((res) => {
        this.radioLists = [
          { value: 0, text: '橘子' },
          { value: 1, text: '柠檬' },
          { value: 2, text: '香蕉' },
          { value: 3, text: '苹果' },
          { value: 4, text: '榴莲' }
        ];
        console.log('模拟请求数据--选项', this.radioLists);
      });
      this.formData.radio1 = 1;
      this.formData.radio2 = 3333;
    }, 1000);
  },
  methods: {
    bindTimeChange(e) {},
    clickTest(e) {}
  }
};
</script>

属性

属性名	类型	默认值	说明
value	String	-	选后的值
label	String		文本展示
checked	Boolean	-	是否选择