cv-checkbox-tag 多选框 - 标签 ¶

<template>
  <view class="content">
    <view class="components-title">
      <view class="components-title-t">cv-checkbox-opt-tag</view>
      <view class="components-title-d">多选框标签样式</view>
    </view>
    <cv-form-base ref="refFormBase" style="padding: 0 10px">
      <cv-form-item label="多选标签">
        <cv-checkbox-group v-model="formData.checkboxtag">
          <cv-checkbox-opt-tag :value="item.value" v-for="(item, index) in checkLists" :key="index">
            {{ item.text }}
          </cv-checkbox-opt-tag>
        </cv-checkbox-group>
      </cv-form-item>
      <cv-form-item label="多选标签">
        <cv-checkbox-group v-model="formData.checkboxtag" max-number="3">
          <cv-checkbox-opt-tag :value="item.value" v-for="(item, index) in checkLists" :key="index">
            {{ item.text }}
          </cv-checkbox-opt-tag>
        </cv-checkbox-group>
        <template v-slot:tip>最多选中三个</template>
      </cv-form-item>
      <cv-form-item label="多选标签">
        <cv-checkbox-group v-model="formData.checkboxtag1">
          <cv-checkbox-opt-tag :value="item.value" v-for="(item, index) in checkLists" :key="index">
            {{ item.text }}
          </cv-checkbox-opt-tag>
        </cv-checkbox-group>
        <template v-slot:tip>有默认选项</template>
      </cv-form-item>
    </cv-form-base>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        checkboxtag: '',
        checkboxtag1: [1, 2, 4]
      },
      checkLists: [
        { value: 0, valuea: '10', text: '橘子' },
        { value: 1, valuea: '20', text: '柠檬' },
        { value: 2, valuea: '31', text: '香蕉' },
        { value: 3, valuea: '52', text: '苹果' },
        { value: 4, valuea: '99', text: '榴莲' }
      ]
    };
  },
  onLoad() {},
  methods: {
    bindTimeChange(e) {},
    clickTest(e) {
      console.log(this.formData.checkboxtag);
    }
  }
};
</script>