Skip to content

Checkbox 复选框

基础使用

最简单的使用方式,单个 x-checkbox,设置属性 checked 来表示是否选中。

复选框组

结合 x-checkbox-group 组件和子组件 x-checkbox 可以实现复选组,为 x-checkbox-group 绑定 v-model:value,再为每一个 x-checkbox 设置好对比的 value 属性即可,存在则相当于选中。另外,还可以通过 changeinput 事件来响应变化,它会传入一个参数 value 来表示改变之后的值。如果选项简单,也可以设置 options 属性,接受一个数组,那么 x-checkbox-group 在内部会自动生成 x-checkbox

横向排列

默认情况下,复选框组的复选框按竖直方向上排放。设置 inlinetrue,则按水平方向排放。

颜色

通过属性 color 为复选框设置颜色,Checkbox 上的 color 优先级会高于 CheckboxGroup 上的。这样你可以单独为某个复选框赋予特色的颜色。

禁用状态

通过属性 disabled 为复选框设置禁用状态,CheckboxGroup 上的 color 优先级会高于 Checkbox 上的。

中间状态

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

CheckboxGroup API

属性

属性名说明类型默认值是否必填
value用于设置当前选中的值Array-No
color复选框颜色String-No
inline复选框横向排列BooleanfalseNo
disabled是否禁用BooleanfalseNo
options复选框选项,也可用 template 替代Array-No
indeterminate设置不确定状态BooleanfalseNo

插槽

插槽名说明作用域参数
default同级 Checkbox 组件-

Checkbox API

属性

属性名说明类型默认值是否必填
color复选框颜色,优先级高于CheckboxGroupStringblueNo
checked指定当前是否选中,在组件独立情况下工作BooleanfalseNo
disabled是否禁用BooleanfalseNo
value根据 value 进行比较,判断是否选中,在CheckboxGroup下工作any-No

插槽

插槽名说明作用域参数
default设置复选框的 Label-