@tanzhenxing/zx-checkbox-group v1.0.5

zx-checkbox-group 多选框组

多选框组组件用于管理一组多选框，使它们成为一个整体，通常用于可选项较多的场景。

基础用法

使用 v-model 绑定一个数组类型的变量，数组的值为当前选中的多选框的 value 值。

<zx-checkbox-group v-model="checkList">
  <zx-checkbox label="选项 A" value="A" />
  <zx-checkbox label="选项 B" value="B" />
  <zx-checkbox label="选项 C" value="C" />
</zx-checkbox-group>

<script setup>
import { ref } from 'vue';

const checkList = ref(['A', 'B']);
</script>

禁用状态

通过设置 disabled 属性可以禁用整个多选框组。

<zx-checkbox-group v-model="checkList" disabled>
  <zx-checkbox label="选项 A" value="A" />
  <zx-checkbox label="选项 B" value="B" />
  <zx-checkbox label="选项 C" value="C" />
</zx-checkbox-group>

布局方式

默认为横向布局，可以通过 placement 属性设置为纵向布局。

<!-- 横向布局 -->
<zx-checkbox-group v-model="checkList" placement="row">
  <zx-checkbox label="选项 A" value="A" />
  <zx-checkbox label="选项 B" value="B" />
  <zx-checkbox label="选项 C" value="C" />
</zx-checkbox-group>

<!-- 纵向布局 -->
<zx-checkbox-group v-model="checkList" placement="column">
  <zx-checkbox label="选项 A" value="A" />
  <zx-checkbox label="选项 B" value="B" />
  <zx-checkbox label="选项 C" value="C" />
</zx-checkbox-group>

限制可选数量

通过设置 min 和 max 属性可以限制可以选择的选项数量。

<zx-checkbox-group v-model="checkList" :min="1" :max="2">
  <zx-checkbox label="选项 A" value="A" />
  <zx-checkbox label="选项 B" value="B" />
  <zx-checkbox label="选项 C" value="C" />
  <zx-checkbox label="选项 D" value="D" />
</zx-checkbox-group>

自定义样式

可以通过设置 activeColor、size、labelSize 等属性来自定义多选框组的样式。

<zx-checkbox-group 
  v-model="checkList" 
  active-color="#ff5500" 
  size="40rpx"
  label-size="30rpx"
>
  <zx-checkbox label="选项 A" value="A" />
  <zx-checkbox label="选项 B" value="B" />
  <zx-checkbox label="选项 C" value="C" />
</zx-checkbox-group>

纵向排列并显示下边框

在纵向排列模式下，可以通过 border-bottom 属性显示下边框，增强视觉分隔效果。

<zx-checkbox-group v-model="checkList" placement="column" border-bottom>
  <zx-checkbox label="选项 A" value="A" />
  <zx-checkbox label="选项 B" value="B" />
  <zx-checkbox label="选项 C" value="C" />
</zx-checkbox-group>

图标位置设置

通过 icon-placement 属性可以设置图标的位置，默认为左侧。

<zx-checkbox-group v-model="checkList" icon-placement="right">
  <zx-checkbox label="选项 A" value="A" />
  <zx-checkbox label="选项 B" value="B" />
  <zx-checkbox label="选项 C" value="C" />
</zx-checkbox-group>

实现全选/反选功能

结合 checkbox 的 indeterminate 属性，可以实现全选/反选功能。

<template>
  <zx-checkbox 
    v-model="checkAll" 
    :indeterminate="isIndeterminate"
    @change="handleCheckAllChange"
    label="全选"
  />
  <zx-checkbox-group v-model="checkList" @change="handleCheckedChange">
    <zx-checkbox v-for="item in options" :key="item" :label="item" :value="item" />
  </zx-checkbox-group>
</template>

<script setup>
import { ref } from 'vue';

const options = ['选项1', '选项2', '选项3', '选项4'];
const checkList = ref(['选项1', '选项2']);
const checkAll = ref(false);
const isIndeterminate = ref(true);

const handleCheckAllChange = (val) => {
  checkList.value = val ? [...options] : [];
  isIndeterminate.value = false;
};

const handleCheckedChange = (value) => {
  const checkedCount = value.length;
  checkAll.value = checkedCount === options.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < options.length;
};
</script>

属性

事件

插槽