复选框 Checkbox

这是多选题。

基础使用

复选框 Checkbox，传入 modelValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultValue 属性作为默认值。

复选框 Checkbox 有两种样式变体，普通模式（'normal'，默认）和经典模式（retro）。经典模式的样式为致敬早期的游戏 UI 而设置。

Basic Checkbox

Uncontrolled

Set Label By Prop

Retro Style

Retro Style Checked

隐藏源代码

禁用、只读状态

复选框 Checkbox，readonly 设置只读，disabled 设置禁用。此时内部 <input> 都会被设置 disabled，它们之间几乎只有样式不一样。

Checked

Unchecked

Checked Readonly

Unchecked Readonly

Checked

Unchecked

Checked Readonly

Unchecked Readonly

隐藏源代码

复选组

可以通过组合 CheckboxGroup 和 Checkbox 来形成一个复选组。

CheckboxGroup 的值为选中的 Checkbox 复选框组件的 value 组成的数组。

同样地，CheckboxGroup 传入 modelValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultValue 属性作为默认值。

Abigail

Harvey

Leah

Maru

Elliott

Haley

Penny

Sebastian

Retro Style

Dwarf

Krobus

Readonly

Sam

Shane

Disabled

Alex

Clint

隐藏源代码

半选中

Checkbox 的 indeterminate 为 true 可以把复选框置为半选中状态，这个属性仅控制样式，和当前复选框的值无关。

Normal

Retro

Select All

Blue Jazz

Carrot

Coffee Bean

Parsnip

隐藏源代码

垂直排列

CheckboxGroup 的 direction 属性用于设置子复选框的排列方向。

Horizontal

Vertical

Normal

Retro

Anchovy

Tuna

Sardine

Bream

隐藏源代码

复选框尺寸

Checkbox 和 CheckboxGroup 的 size 属性都可以用于设置复选框的尺寸。

Single Checkbox

Small

Medium

Large

Small & Retro

Medium & Retro

Large & Retro

Group

A

B

C

D

A

B

C

D

A

B

C

D

隐藏源代码

选项属性

CheckboxGroup 的 options 属性用于直接传入选项，可以用于简单复选组的快速创建。

Normal

Retro

Lava Eel

Ice Pip

Midnight Carp

Slimejack

隐藏源代码

API

CheckboxProps

属性	类型	可选	默认值	描述	版本
modelValue	boolean | null	是		复选框组件 Checkbox 的值（受控模式）。	0.0.3
defaultValue	boolean | null	是		复选框组件 Checkbox 的默认值（非受控模式）。	0.0.3
indeterminate	boolean	是	false	半选中状态。	0.0.3
disabled	boolean	是	false	禁用状态。	0.0.3
readonly	boolean	是	false	只读状态。	0.0.3
variant	'normal' | 'retro'	是	'normal'	复选框的样式变体。	0.0.3
label	string	是		复选框的文本。	0.0.3
value	any	是		复选框的原生 value 属性。	0.0.3
size	'medium' | 'large' | 'small'	是	'medium'	复选框的大小。	0.0.3
pollSizeChange	boolean	是	false	开启轮询组件尺寸变化，可能会影响性能。	0.1.0

CheckboxEvents

事件	参数	描述	版本
update:modelValue	value: boolean	更新 modelValue 的回调。	0.0.3
input	value: boolean, event: InputEvent	选中/取消选择复选框的回调。	0.0.3
change	value: boolean, event: Event	复选框选中状态改变的回调。	0.0.3
focus	event: FocusEvent	复选框聚焦的回调。	0.0.3
blur	event: FocusEvent	复选框失去焦点的回调。	0.0.3

CheckboxSlots

插槽	参数	描述	版本
default		复选框的文本。	0.0.3

CheckboxGroupProps

属性	类型	可选	默认值	描述	版本
modelValue	any[] | null	是		复选组组件 CheckboxGroup 的值（受控模式）。	0.0.3
defaultValue	any[] | null	是		复选组组件 CheckboxGroup 的默认值（非受控模式）。	0.0.3
disabled	boolean	是	false	禁用状态。	0.0.3
readonly	boolean	是	false	只读状态。	0.0.3
variant	'normal' | 'retro'	是		后代的单选框组件的样式变体，如果设置，优先于后代的单选框组件自身的 variant。	0.0.3
direction	'horizontal' | 'vertical'	是	'horizontal'	复选框子组件排列方向。	0.0.3
options	(CheckboxGroupOption | string)[]	是		复选组选项。	0.0.3
size	'medium' | 'large' | 'small'	是	'medium'	后代的复选框组件的尺寸大小，如果设置，优先于后代的复选框组件自身的 size。	0.0.3
pollSizeChange	boolean	是	false	开启轮询组件尺寸变化，会影响 Checkbox 子组件的同名属性。	0.1.0

CheckboxGroupEvents

事件	参数	描述	版本
update:modelValue	value: any[]	更新 modelValue 的回调。	0.0.3
change	value: any[]	复选组选中内容改变的回调。	0.0.3

CheckboxGroupSlots

插槽	参数	描述	版本
default		复选框子组件。	0.0.3

Option

export interface Option<T = any> {
	value: T
	label: string
}

CheckboxGroupOption

export interface CheckboxGroupOption<T = any> extends Option<T> {
	disabled?: boolean
	key?: string | number | symbol
}