cv-checkbox-opt-btn 多选框

简要

多项选择
按钮样式多选框，通过勾选表示选中，一般和表单配合使用，默认为实心白色背景。

示例

::: demo

<template>
  <div style="width: 520px">
    <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px">
      <h1>checkbox 组件</h1>

      <p>按钮样式多选框</p>
      <h3>多选-按钮</h3>
      <cv-checkbox-group v-model="formData.checkboxbtn1" :dataLists="dataLists" type="button"></cv-checkbox-group>
      <h3>多选-按钮 插槽</h3>
      <cv-checkbox-group v-model="formData.checkboxbtn2">
        <cv-checkbox-opt-btn label="北京" value="北京" />
        <cv-checkbox-opt-btn label="上海" value="上海" />
      </cv-checkbox-group>
      <h3>多选-按钮</h3>

      <cv-checkbox-group v-model="formData.checkboxbtn2" disabled>
        <cv-checkbox-opt-btn label="北京" value="北京" />
        <cv-checkbox-opt-btn label="上海" value="上海" />
      </cv-checkbox-group>

      <cv-checkbox-group v-model="formData.checkboxbtn1" :dataLists="dataLists" />
      <h3>多选-按钮</h3>

      <cv-checkbox-group v-model="formData.checkboxbtn2" :dataLists="dataLists" />
      <h3>多选-按钮</h3>

      <cv-checkbox-group v-model="formData.checkboxbtn2" :dataLists="dataLists" disabled />
    </div>
    <cv-btn-base @click="hanldeSubmit">按钮</cv-btn-base>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {},
      dataLists: [
        { label: '北京' },
        { label: '上海', disabled: 'true' },
        { label: '广州', checked: true },
        { label: '深圳' },
        { label: '杭州' }
      ]
    };
  },
  methods: {
    hanldeSubmit() {
      console.log('最后的formData', this.formData);
    }
  }
};
</script>

:::

属性

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