@tanzhenxing/zx-checkbox v1.0.7

zx-checkbox 多选框组件

在一组备选项中进行多选。

使用示例

基础用法

单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。

<template>
  <view>
    <zx-checkbox v-model="checked1" label="选项 1" />
    <zx-checkbox v-model="checked2" label="选项 2" />
  </view>
</template>

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

const checked1 = ref(true);
const checked2 = ref(false);
</script>

禁用状态

多选框不可用状态。

<zx-checkbox v-model="checked1" disabled label="禁用" />
<zx-checkbox v-model="checked2" label="未禁用" />

多选框组

适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

<template>
  <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 label="禁用" value="D" disabled />
    <zx-checkbox label="选中且禁用" value="E" disabled />
  </zx-checkbox-group>
</template>

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

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

中间状态

indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果。

<template>
  <zx-checkbox 
    v-model="checkAll" 
    :indeterminate="isIndeterminate"
    @change="handleCheckAllChange"
    label="全选" 
  />
  <zx-checkbox-group 
    v-model="checkedCities" 
    @change="handleCheckedCitiesChange"
  >
    <zx-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
      {{ city }}
    </zx-checkbox>
  </zx-checkbox-group>
</template>

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

const checkAll = ref(false);
const isIndeterminate = ref(true);
const checkedCities = ref(['上海', '北京']);
const cities = ['上海', '北京', '广州', '深圳'];

const handleCheckAllChange = (val) => {
  checkedCities.value = val ? cities : [];
  isIndeterminate.value = false;
};
const handleCheckedCitiesChange = (value) => {
  const checkedCount = value.length;
  checkAll.value = checkedCount === cities.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length;
};
</script>

带有边框

设置 border 属性可以渲染为带有边框的多选框。

<zx-checkbox v-model="checked1" label="选项1" border />
<zx-checkbox v-model="checked2" label="选项2" border />

属性

事件

插槽