Appearance
Checkbox 多选框
一组备选项中进行多选。
基础用法
单独使用可以表示两种状态之间的切换,写在标签中的内容为 checkbox 按钮后的介绍。
在 fyo-checkbox 元素中定义 v-model 绑定变量,单一的 checkbox 中,默认绑定变量的值会是 Boolean,选中为 true。
禁用状态
多选框不可用状态。
设置 disabled 属性即可。
多选框组
适用于多个勾选框绑定到同一个数组的情景,通过 v-model 绑定到同一个数组。
checkbox-group 元素能把多个 checkbox 管理为一组,只需要在 Group 中使用 v-model 绑定 Array 类型的变量即可。 fyo-checkbox 的 label 属性是该 checkbox 对应的值,若该标签中无内容,则该属性也充当 checkbox 按钮后的介绍。 label 与数组中的元素值相对应,如果存在指定的值则为选中状态,否则为不选中。
中间状态
indeterminate 属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果。
可选项目数量的限制
使用 min 和 max 属性能够限制可以被勾选的项目的数量。
按钮样式
按钮样式的多选组合。
只需要把 fyo-checkbox 元素换成 fyo-checkbox-button 元素即可。此外,fyo-checkbox-group 还提供了 size 属性。
带有边框
设置 border 属性可以渲染为带有边框的多选框。
API
Checkbox Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | string / number / boolean | — |
| label | 选中状态的值(只有在checkbox-group或者绑定对象类型为array时有效) | string / number / boolean | — |
| true-label | 选中时的值 | string / number | — |
| false-label | 没有选中时的值 | string / number | — |
| disabled | 是否禁用 | boolean | false |
| border | 是否显示边框 | boolean | false |
| size | Checkbox 的尺寸 | string | — |
| name | 原生 name 属性 | string | — |
| checked | 当前是否勾选 | boolean | false |
| indeterminate | 设置不确定状态,仅负责样式控制 | boolean | false |
Checkbox Group Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | array | — |
| size | 多选框组尺寸,仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效 | string | — |
| disabled | 是否禁用 | boolean | false |
| min | 可被勾选的 checkbox 的最小数量 | number | — |
| max | 可被勾选的 checkbox 的最大数量 | number | — |
| text-color | 按钮形式的 Checkbox 激活时的文本颜色 | string | #ffffff |
| fill | 按钮形式的 Checkbox 激活时的填充色和边框色 | string | #e65d6e |
Checkbox Group Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 绑定值变化时触发的事件 | 更新后的值 |
Checkbox Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 绑定值变化时触发的事件 | 更新后的值 |