Checkbox 多选框

WARNING

label 作为 value 来使用已经被 废弃, 建议label 只用来表示展示的文字,这个被废弃的用法将会在 3.0.0 版本被移除,请考虑使用新 API 替换.

新 API value2.6.0 中已经可用,您可以使用 value API 来设置复选框的值。

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

基础用法

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

禁用状态

多选框不可用状态。

多选框组

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

中间状态

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

可选项目数量的限制

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

按钮样式

按钮样式的多选组合。

带有边框

Checkbox API

Checkbox Attributes

属性名说明类型默认值
model-value / v-model选中项绑定值string / number / boolean
value 2.6.0选中状态的值(只有在checkbox-group或者绑定对象类型为array时有效)string / number / boolean / object
label选中状态的值,只有在绑定对象类型为 array 时有效。 如果没有 value, label则作为value使用string / number / boolean / object
true-value 2.6.0选中时的值string / number
false-value 2.6.0没有选中时的值string / number
true-label deprecated选中时的值string / number
false-label deprecated没有选中时的值string / number
disabled是否禁用booleanfalse
border是否显示边框booleanfalse
sizeCheckbox 的尺寸enum
name原生 name 属性string
checked当前是否勾选booleanfalse
indeterminate设置不确定状态,仅负责样式控制booleanfalse
validate-event输入时是否触发表单的校验booleantrue
tabindex输入框的 tabindexstring / number
idinput idstring
controls a11yaria-control一致, 当 indeterminatetrue时生效boolean

Checkbox Events

事件名说明类型
change当绑定值变化时触发的事件Function

Checkbox Slots

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

CheckboxGroup API

CheckboxGroup Attributes

属性名说明类型默认值
model-value / v-model绑定值object[]
size多选框组尺寸enum
disabled是否禁用booleanfalse
min可被勾选的 checkbox 的最小数量number
max可被勾选的 checkbox 的最大数量number
label为屏幕阅读器准备的标签string
text-color当按钮为活跃状态时的字体颜色string#ffffff
fill当按钮为活跃状态时的边框和背景颜色string#409eff
tag复选框组元素标签stringdiv
validate-event是否触发表单验证booleantrue

CheckboxGroup Events

事件名说明类型
change当绑定值变化时触发的事件Function

CheckboxGroup Slots

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

CheckboxButton API

CheckboxButton Attributes

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

CheckboxButton Slots

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

源代码

组件文档

贡献者