Checkbox 多选框
一组备选项中进行多选
改进点
- 整个checkbox代码进行了重构
- 去除min属性
- 更加符合直觉
基础用法
单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。
禁用状态
多选框不可用状态。
多选框组
适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。
中间状态
indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果
可选项目数量的限制
使用 min 和 max 属性能够限制可以被勾选的项目的数量。
按钮样式
按钮样式的多选组合。
带有边框
Checkbox 属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| model-value / v-model | 选中项绑定值 | string / number / boolean | — | — |
| value | 选中状态的值（只有在checkbox-group下使用时有效） | string / number | — | — |
| true-value | 选中时的值 | string / number | — | — |
| false-value | 没有选中时的值 | string / number | — | — |
| disabled | 是否禁用 | boolean | — | false |
| size | Checkbox 的尺寸 | string | large / default / small | — |
| checked | 当前是否勾选 | boolean | — | false |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | — | false |
Checkbox 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 当绑定值变化时触发的事件 | value |
Checkbox 插槽
| 插槽名 | 说明 |
|---|---|
| — | 自定义默认内容 |
Checkbox-Group 属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| model-value / v-model | 绑定值 | array | — | [] |
| size | 多选框组尺寸 | string | large / default / small | — |
| disabled | 是否禁用 | boolean | — | false |
| max | 可被勾选的 checkbox 的最大数量 | number | — | — |
Checkbox-Group 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 当绑定值变化时触发的事件 | value |
Checkbox-Group 插槽
| 插槽名 | 说明 | 子标签 |
|---|---|---|
| - | 自定义默认内容 | Checkbox / Checkbox-button |
Checkbox-Button 属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value | 选中状态的值，只有在绑定对象类型为 array 时有效。 | string / number / boolean / object | — | — |
| true-label | 选中时的值 | string / number | — | — |
| false-label | 没有选中时的值 | string / number | — | — |
| disabled | 是否禁用 | boolean | — | false |
| name | 原生 name 属性 | string | — | — |
| checked | 当前是否勾选 | boolean | — | false |
Checkbox-Button 插槽
| 插槽名 | 描述 |
|---|---|
| — | 自定义默认内容 |