Checkbox 多选框

用于在一组选项中选择一个或多个结果。

基础用法

苹果

香蕉

<template>
  <div>
    <LbCheckbox v-model="checked">苹果</LbCheckbox>
    <LbCheckbox v-model="checked2" label="香蕉" />
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

const checked = ref<boolean | null>(false);
const checked2 = ref<boolean | null>(true);
</script>

分组用法

苹果

香蕉

橙子

葡萄

已选择：banana, grape

<template>
  <div>
    <LbCheckboxGroup v-model="fruits" name="fruits">
      <LbCheckbox label="苹果" value="apple" />
      <LbCheckbox label="香蕉" value="banana" />
      <LbCheckbox label="橙子" value="orange" />
      <LbCheckbox label="葡萄" value="grape" />
    </LbCheckboxGroup>
    <div style="margin-top: 8px; font-size: 12px; color: #888">
      已选择：{{ fruits.join(", ") }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

const fruits = ref<Array<string | number | boolean>>(["banana", "grape"]);
</script>

半选状态

全选

北京

上海

广州

深圳

<template>
  <div>
    <LbCheckbox
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      @change="onCheckAllChange"
    >
      全选
    </LbCheckbox>
    <div style="margin-top: 8px">
      <LbCheckboxGroup v-model="checkedList" name="cities">
        <LbCheckbox label="北京" value="beijing" />
        <LbCheckbox label="上海" value="shanghai" />
        <LbCheckbox label="广州" value="guangzhou" />
        <LbCheckbox label="深圳" value="shenzhen" />
      </LbCheckboxGroup>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";

const all = ["beijing", "shanghai", "guangzhou", "shenzhen"];
const checkedList = ref<Array<string | number | boolean>>([
  "beijing",
  "guangzhou",
]);
const checkAll = ref<boolean | null>(false);
const isIndeterminate = ref(false);

watch(
  checkedList,
  (list) => {
    const length = list.length;
    checkAll.value = length === all.length ? true : false;
    isIndeterminate.value = length > 0 && length < all.length;
  },
  { immediate: true }
);

const onCheckAllChange = (val: boolean) => {
  checkedList.value = val ? [...all] : [];
};
</script>

禁用状态

禁用未勾选

禁用已勾选

<template>
  <div>
    <LbCheckbox v-model="c1" disabled>禁用未勾选</LbCheckbox>
    <LbCheckbox v-model="c2" disabled>禁用已勾选</LbCheckbox>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

const c1 = ref<boolean | null>(false);
const c2 = ref<boolean | null>(true);
</script>

尺寸

Small

Base

Large

<template>
  <div style="display: flex; gap: 16px; align-items: center">
    <LbCheckbox v-model="s1" size="small">Small</LbCheckbox>
    <LbCheckbox v-model="s2" size="base">Base</LbCheckbox>
    <LbCheckbox v-model="s3" size="large">Large</LbCheckbox>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

const s1 = ref<boolean | null>(true);
const s2 = ref<boolean | null>(true);
const s3 = ref<boolean | null>(true);
</script>

Checkbox Props

属性名	说明	类型	可选值	默认值
modelValue / v-model	绑定值	boolean | null	—	null
label	显示文本（也作为回退的值）	string | number | boolean	—	''
value	选项值（优先用于分组时判定）	string | number | boolean	—	''
disabled	是否禁用	boolean	true | false	false
indeterminate	是否为半选状态	boolean	true | false	false
name	原生 name 属性	string	—	''
size	尺寸	"small" | "base" | "large"	small, base, large	base

Checkbox Events

事件名	说明	回调参数
change	勾选变化时触发	(checked: boolean) => void
update:modelValue	勾选变化时触发	(checked: boolean | null) => void

CheckboxGroup Props

属性名	说明	类型	可选值	默认值
modelValue / v-model	绑定数组值	Array<string | number | boolean>	—	[]
name	原生 name 属性	string	—	''
size	组内复选框尺寸	"small" | "base" | "large"	small, base, large	base
disabled	是否禁用	boolean	true | false	false

CheckboxGroup Events

事件名	说明	回调参数
change	绑定值变化时触发	(value: Array<string | number | boolean>) => void
update:modelValue	绑定值变化时触发	(value: Array<string | number | boolean>) => void