Checkbox 多选框
在一组备选项中进行多选。
基础用法
单独使用可以表示两种状态之间的切换,写在标签中的内容为 checkbox 按钮后的介绍。
禁用状态
多选框不可用状态。
多选框组
适用于多个勾选框绑定到同一个数组的情景,通过是否勾选来表示这一组选项中选中的项。
中间状态
indeterminate
属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果
可选项目数量的限制
使用 min
和 max
属性能够限制可以被勾选的项目的数量。
按钮样式
按钮样式的多选组合。
带有边框
Checkbox API
Checkbox Attributes
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
model-value / v-model | 选中项绑定值 | string / number / boolean | — |
value | 选中状态的值(只有在checkbox-group 或者绑定对象类型为array 时有效) | string / number / boolean / object | — |
label | 选中状态的值,只有在绑定对象类型为 array 时有效。 如果没有 value, label 则作为value 使用 | string / number / boolean / object | — |
disabled | 是否禁用 | boolean | false |
size | Checkbox 的尺寸 | enum 'large' | 'default' | 'small' | — |
name | 原生 name 属性 | string | — |
Checkbox Events
事件名 | 说明 | 类型 |
---|---|---|
change | 当绑定值变化时触发的事件 | Function (value: string | number | boolean) => void |
Checkbox Slots
插槽名 | 说明 |
---|---|
default | 自定义默认内容 |
CheckboxGroup API
CheckboxGroup Attributes
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
model-value / v-model | 绑定值 | object string[] | number[] | [] |
size | 多选框组尺寸 | enum 'large' | 'default' | 'small' | — |
disabled | 是否禁用 | boolean | false |
min | 可被勾选的 checkbox 的最小数量 | number | — |
max | 可被勾选的 checkbox 的最大数量 | number | — |
CheckboxGroup Events
事件名 | 说明 | 类型 |
---|---|---|
change | 当绑定值变化时触发的事件 | Function (value: string[] | number[]) => void |
CheckboxGroup Slots
插槽名 | 说明 | 子标签 |
---|---|---|
default | 自定义默认内容 | Checkbox / Checkbox-button |