Checkbox 复选框

复选框是一种允许用户从一组选项中选择多个选项的控件。它通常用于表单中，允许用户进行多项选择。

Checkbox 参数

Props

名称	类型	默认值	描述
modelValue	boolean | any[]	-	选中状态，可以是布尔值或数组
value	string | number	-	复选框值，在组合使用时有效
type	ComponentType	'default'	复选框类型
shape	'check' | 'dot'	'check'	复选框形状
size	ComponentSize	'medium'	复选框大小
disabled	boolean	false	是否禁用
label	string	-	标签内容
indeterminate	boolean	false	是否为不确定状态

Slots

名称	描述	参数
default	默认插槽，用于显示复选框标签	-
box	自定义复选框图标	{ checked: boolean, indeterminate: boolean, disabled: boolean }

Events

名称	描述	参数
update:modelValue	复选框值变化时触发	(value: boolean | any[]) => void
change	复选框值变化时触发	(value: boolean | any[]) => void

CheckboxGroup 参数

Props

名称	类型	默认值	描述
modelValue	(string | number)[]	[]	选中值数组
type	ComponentType	'default'	复选框组类型
size	ComponentSize	'medium'	复选框组大小
disabled	boolean	false	是否禁用
direction	Direction	'horizontal'	布局方向
gap	string | number	0	间距
all	boolean | null	-	全选状态，true 为全选，false 为全不选，null 为部分选中

Slots

名称	描述	参数
default	默认插槽，用于放置 Checkbox 组件	-

Events

名称	描述	参数
update:modelValue	选中值变化时触发	(value: (string | number)[]) => void
change	选中值变化时触发	(value: (string | number)[]) => void
update:all	全选状态变化时触发	(value: boolean | null) => void

示例

基础用法

不同形状

不同尺寸

不同类型

禁用状态

不确定状态

复选框组

组尺寸和类型

组禁用

自定义内容

TypeScript

// 基础颜色类型
export type ComponentType =
  | "default"
  | "primary"
  | "secondary"
  | "success"
  | "warning"
  | "error"
  | "info";

// 组件尺寸
export type ComponentSize = "small" | "medium" | "large";

// 方向
export type Direction = "horizontal" | "vertical";