Checkbox 多选框

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

基础用法

单独使用可以表示两种状态之间的切换

选中项绑定到v-model显示的变量上。它的值是 Boolean 类型的。

Hello Checkbox

<template>
  <ImCheckbox v-model="checked" label="Hello Checkbox" />
</template>

禁用状态

多选框不可用状态 设置 disabled 属性为 true 即可。

Hello Checkbox

<template>
  <ImCheckbox label="Hello Checkbox" disabled />
</template>

只读状态

多选框只读状态 设置 readonly 属性为 true 即可。

Hello Checkbox

<template>
  <ImCheckbox label="Hello Checkbox" readonly />
</template>

多选框组

多选情况下，每一个 ImCheckbox 必须传入 value 属性，以及 v-model必须是数组

全选

是否全选：[]

选项 1选项 2选项 3

<template>
  <ImCheckbox
    v-model="isCheckAll"
    :indeterminate="indeterminate"
    label="全选"
    @change="onCheckAll" />
  <div>{{ checkedList }}</div>
  <ImCheckbox
    :value="item"
    v-model="checkedList"
    @change="onItemChange"
    v-for="item in list"
    >选项 {{ item }}</ImCheckbox
  >
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';

const checkedList = ref([]);
const isCheckAll = ref(false);
const indeterminate = computed(
  () =>
    checkedList.value.length > 0 &&
    list.length > checkedList.value.length &&
    !isCheckAll.value
);
const list = ['1', '2', '3'];

watch(
  () => checkedList.value,
  (val) => {
    isCheckAll.value = val.length === list.length;
  }
);
const onCheckAll = () => {
  if (isCheckAll.value) {
    checkedList.value = list;
  } else {
    checkedList.value = [];
  }
};
</script>

API

属性	说明	类型	默认值
v-model	绑定值	Boolean	false
label	显示的文本	String	无
disabled	是否禁用	Boolean	false
readonly	是否只读	Boolean	false
indeterminate	是否为半选状态	Boolean	false
change	状态改变时的回调函数	Function	无
name	原生 name 属性	String	无
value	绑定的值	String|Number	无