Checkbox 多选框

多选框组件，用于一组备选项中进行多选。

基础用法

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

选项A选项B选中值: true, false

<template>
  <x-checkbox v-model="checked">选项</x-checkbox>
</template>

<script setup>
import { ref } from 'vue'
const checked = ref(true)
</script>

禁用状态

多选框不可用状态。

禁用选中禁用未选中

<template>
  <x-checkbox v-model="checked" disabled>禁用状态</x-checkbox>
</template>

多选框组

适用于多个勾选框绑定到同一个数组的情景，通过 CheckboxGroup 组件包裹。

选项A选项B选项C

选中值: [ "1" ]

<template>
  <x-checkbox-group v-model="checked">
    <x-checkbox value="1">选项A</x-checkbox>
    <x-checkbox value="2">选项B</x-checkbox>
    <x-checkbox value="3">选项C</x-checkbox>
  </x-checkbox-group>
</template>

<script setup>
import { ref } from 'vue'
const checked = ref(['1'])
</script>

中间状态

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

全选

选项A选项B选项C

<template>
  <x-checkbox
    :model-value="checked.length > 0"
    :indeterminate="checked.length > 0 && checked.length < 3"
    @change="handleCheckAll"
  >
    全选
  </x-checkbox>
  <x-checkbox-group v-model="checked">
    <x-checkbox value="1">选项A</x-checkbox>
    <x-checkbox value="2">选项B</x-checkbox>
    <x-checkbox value="3">选项C</x-checkbox>
  </x-checkbox-group>
</template>

<script setup>
import { ref } from 'vue'
const checked = ref([])

const handleCheckAll = () => {
  checked.value = checked.value.length === 3 ? [] : ['1', '2', '3']
}
</script>

可选项目数量限制

使用 min 和 max 属性能够限制可以被勾选的项目的数量。

选项A选项B选项C选项D

选中值: []（至少选1个，最多选2个）

<template>
  <x-checkbox-group v-model="checked" :min="1" :max="2">
    <x-checkbox value="1">选项A</x-checkbox>
    <x-checkbox value="2">选项B</x-checkbox>
    <x-checkbox value="3">选项C</x-checkbox>
    <x-checkbox value="4">选项D</x-checkbox>
  </x-checkbox-group>
</template>

多选框组禁用

选项A选项B选项C

<template>
  <x-checkbox-group v-model="checked" disabled>
    <x-checkbox value="A">选项A</x-checkbox>
    <x-checkbox value="B">选项B</x-checkbox>
    <x-checkbox value="C">选项C</x-checkbox>
  </x-checkbox-group>
</template>

API

Checkbox Props

属性	说明	类型	默认值
modelValue	绑定值	boolean | string | number | boolean[] | string[] | number[]	false
value	多选框的值	string | number | boolean	—
label	多选框的标签文本（也可使用默认插槽）	string | number	—
disabled	是否禁用	boolean	false
name	原生 name 属性	string	—
indeterminate	是否为不确定状态	boolean	false

Checkbox Events

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

CheckboxGroup Props

属性	说明	类型	默认值
modelValue	绑定值	(string | number)[]	[]
disabled	是否禁用所有子选项	boolean	false
min	可被勾选的最小数量	number	0
max	可被勾选的最大数量	number	0

CheckboxGroup Events

事件名	说明	回调参数
update:modelValue	绑定值变化时触发	(value: (string | number)[])
change	绑定值变化时触发	(value: (string | number)[])