Checkbox 复选框
基础使用
最简单的使用方式,单个 x-checkbox,设置属性 checked 来表示是否选中。
复选框组
结合 x-checkbox-group 组件和子组件 x-checkbox 可以实现复选组,为 x-checkbox-group 绑定 v-model:value,再为每一个 x-checkbox 设置好对比的 value 属性即可,存在则相当于选中。另外,还可以通过 change、input 事件来响应变化,它会传入一个参数 value 来表示改变之后的值。如果选项简单,也可以设置 options 属性,接受一个数组,那么 x-checkbox-group 在内部会自动生成 x-checkbox。
横向排列
默认情况下,复选框组的复选框按竖直方向上排放。设置 inline 为 true,则按水平方向排放。
颜色
通过属性 color 为复选框设置颜色,Checkbox 上的 color 优先级会高于 CheckboxGroup 上的。这样你可以单独为某个复选框赋予特色的颜色。
禁用状态
通过属性 disabled 为复选框设置禁用状态,CheckboxGroup 上的 color 优先级会高于 Checkbox 上的。
中间状态
indeterminate 属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果。
CheckboxGroup API
属性
| 属性名 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| value | 用于设置当前选中的值 | Array | - | No |
| color | 复选框颜色 | String | - | No |
| inline | 复选框横向排列 | Boolean | false | No |
| disabled | 是否禁用 | Boolean | false | No |
| options | 复选框选项,也可用 template 替代 | Array | - | No |
| indeterminate | 设置不确定状态 | Boolean | false | No |
插槽
| 插槽名 | 说明 | 作用域参数 |
|---|---|---|
default | 同级 Checkbox 组件 | - |
Checkbox API
属性
| 属性名 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| color | 复选框颜色,优先级高于CheckboxGroup | String | blue | No |
| checked | 指定当前是否选中,在组件独立情况下工作 | Boolean | false | No |
| disabled | 是否禁用 | Boolean | false | No |
| value | 根据 value 进行比较,判断是否选中,在CheckboxGroup下工作 | any | - | No |
插槽
| 插槽名 | 说明 | 作用域参数 |
|---|---|---|
default | 设置复选框的 Label | - |