cv-radio-opt-btn 单选框

简要

单项选择
按钮样式单选，一般和表单配合使用，默认为实心白色背景。

示例

::: demo

<template>
  <div style="width: 520px">
    <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px">
      <h1>radio 组件样式</h1>
      <h2>普通样式1</h2>
      <cv-radio-group v-model="formData.radiobutton1">
        <cv-radio-opt-base value="3">备选项1</cv-radio-opt-base>
        <cv-radio-opt-base value="6">备选项2</cv-radio-opt-base>
        <cv-radio-opt-base value="9">备选项3</cv-radio-opt-base>
      </cv-radio-group>
      <h2>普通样式2</h2>
      <cv-radio-group v-model="formData.radiobutton2" :dataLists="settRadio"></cv-radio-group>
      <h2>按钮样式1</h2>
      <cv-radio-group v-model="formData.radiobutton3">
        <cv-radio-opt-btn label="3" value="3">备选项</cv-radio-opt-btn>
        <cv-radio-opt-btn label="6" value="6">备选项</cv-radio-opt-btn>
        <cv-radio-opt-btn label="9" value="9">备选项</cv-radio-opt-btn>
      </cv-radio-group>
      <h2>按钮样式2</h2>
      <cv-radio-group type="button" v-model="formData.radiobutton4" :dataLists="settRadio"></cv-radio-group>
    </div>
    <cv-btn-base @click="hanldeSubmit">按钮</cv-btn-base>
  </div>
</template>

<script>
export default {
  data() {
    return {
      settRadio: [
        { label: 3, value: 3 },
        { label: 6, value: 6 },
        { label: 9, value: 9 }
      ],
      formData: {
        radiobutton1: 3,
        radiobutton2: 6,
        radiobutton3: 6,
        radiobutton4: 6
      },
      // 自定义的选框信息
      setCity: [
        { label: '北京', value: ['1', '2'] },
        { label: '上海', checked: true },
        { label: '广州' },
        { label: '深圳', disabled: true }
      ]
    };
  },
  watch: {
    'formData.radiobutton'(newVal) {
      console.log(newVal);
    }
  },
  methods: {
    hanldeSubmit() {
      console.log('最后的formData', this.formData);
    }
  }
};
</script>

:::

属性

属性名	类型	默认值	说明	可选值
label	String	-	值	-