Checkbox 多选框

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

基础用法

单独使用可以表示两种状态之间的切换,写在标签中的内容为 checkbox 按钮后的介绍。

禁用状态

多选框不可用状态。

多选框组

适用于多个勾选框绑定到同一个数组的情景,通过是否勾选来表示这一组选项中选中的项。

中间状态

indeterminate 属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果

可选项目数量的限制

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

按钮样式

按钮样式的多选组合。

带有边框

Checkbox 属性

属性说明类型可选值默认值
model-value / v-model选中项绑定值string / number / boolean
label选中状态的值(只有在checkbox-group或者绑定对象类型为array时有效)string / number / boolean / object
true-label选中时的值string / number
false-label没有选中时的值string / number
disabled是否禁用booleanfalse
border是否显示边框booleanfalse
sizeCheckbox 的尺寸stringlarge / default / small
name原生 name 属性string
checked当前是否勾选booleanfalse
indeterminate设置 indeterminate 状态,只负责样式控制booleanfalse

Checkbox 事件

事件名说明回调参数
change当绑定值变化时触发的事件value

Checkbox 插槽

插槽名说明
自定义默认内容

Checkbox-Group 属性

属性说明类型可选值默认值
model-value / v-model绑定值array[]
size多选框组尺寸stringlarge / default / small
disabled是否禁用booleanfalse
min可被勾选的 checkbox 的最小数量number
max可被勾选的 checkbox 的最大数量number
label为屏幕阅读器准备的标签string
text-color当按钮为活跃状态时的字体颜色string#ffffff
fill当按钮为活跃状态时的边框和背景颜色string#409EFF

Checkbox-Group 事件

事件名说明回调参数
change当绑定值变化时触发的事件value

Checkbox-Group 插槽

插槽名说明子标签
-自定义默认内容Checkbox / Checkbox-button

Checkbox-Button 属性

属性说明类型可选值默认值
label选中状态的值,只有在绑定对象类型为 array 时有效。string / number / boolean / object
true-label选中时的值string / number
false-label没有选中时的值string / number
disabled是否禁用booleanfalse
name原生 name 属性string
checked当前是否勾选booleanfalse

Checkbox-Button 插槽

插槽名描述
自定义默认内容

源代码

组件文档

贡献者