复选框 Checkbox

允许用户从一组选项中选择一个或多个选项，在表单填写场景中，提升数据收集的准确性和操作便捷性。

基础用法

复选框的基本用法。

选项一

禁用选项

<template>
  <bp-space>
    <bp-checkbox v-model="val">选项一</bp-checkbox>
    <bp-checkbox v-model="val" disabled>禁用选项</bp-checkbox>
  </bp-space>
</template>

<script setup lang="ts">
import { ref } from "vue";
const val = ref(true);
</script>

复选框组

通过 checkbox-group 实现复选框组，通过数组收集勾选选项，支持两种布局方式，分别是 vertical 和 horizontal（默认）。

选项一

选项二

选项三

选项四

选项一

选项二

选项三

选项四

<template>
  <bp-checkbox-group v-model="val" direction="horizontal">
    <bp-checkbox v-for="v in options" :value="v">{{ v }}</bp-checkbox>
  </bp-checkbox-group>

  <bp-checkbox-group v-model="val" direction="vertical" style="margin-top: 40px;">
    <bp-checkbox v-for="v in options" :value="v">{{ v }}</bp-checkbox>
  </bp-checkbox-group>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref([]);
const options = ["选项一", "选项二", "选项三", "选项四"];
</script>

限制可勾选数量

在 checkbox-group 中，可以设置 max 以限制勾选数量

选项一

选项二

选项三

选项四

<template>
  <bp-checkbox-group v-model="val" :max="2">
    <bp-checkbox v-for="v in options" :value="v">{{ v }}</bp-checkbox>
  </bp-checkbox-group>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref([]);
const options = ["选项一", "选项二", "选项三", "选项四"];
</script>

不确定状态

在全选的场景下，你可以通过 indeterminate 属性设置复选框的不确定状态。

全选

选项一

选项二

选项三

选项四

<template>
  <bp-space>
    <bp-checkbox v-model="isSelectAll" :indeterminate @change="onSelectAllChange">全选</bp-checkbox>
  </bp-space>

  <bp-checkbox-group v-model="val" style="margin-top: 20px" @change="onChange">
    <bp-checkbox v-for="v in options" :value="v">{{ v }}</bp-checkbox>
  </bp-checkbox-group>
</template>

<script setup lang="ts">
import { ref } from "vue";

const options = ["选项一", "选项二", "选项三", "选项四"];

/**
 * 处理复选框选择的更改事件。
 * @param {string[]} e - 选中的复选框值数组。
 *
 * 如果数组为空，将 `isSelectAll` 设置为 false。
 * 如果数组长度等于选项总数，将 `indeterminate` 设置为 false。
 * 否则，将 `indeterminate` 设置为 true。
 */
const isSelectAll = ref(false);
const indeterminate = ref(false);
const onChange = (e: string[]) => {
  if (!e.length) return (isSelectAll.value = false);

  isSelectAll.value = true;
  if (e.length === options.length) return (indeterminate.value = false);

  indeterminate.value = true;
};

const val = ref<string[]>([]);
const onSelectAllChange = (v: boolean) => {
  if (!v) return (val.value = []);
  val.value = [...options];
};
</script>

Checkbox 属性

v-model	绑定值	CheckboxValue	-	-
value	复选框值	CheckboxValue	true	-
disabled	是否禁用	Boolean	-	-
indeterminate	不确定状态	Boolean	-	-
max	最大可选数量	Number	-	-

CheckboxGroup 属性

v-model	绑定值	CheckboxValue[]	-	-
direction	布局方式	CheckboxDirectionType	horizontal	-
disabled	是否禁用	Boolean	-	-
max	最大可选数量	Number	-	-

Checkbox 事件

change	勾选触发	{model:CheckboxValue}	-

CheckboxGroup 事件

change	勾选触发	{model:CheckboxValue[]}	-