Skip to content

Checkbox 多选框

一组备选项中进行多选。

基础用法

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

fyo-checkbox 元素中定义 v-model 绑定变量,单一的 checkbox 中,默认绑定变量的值会是 Boolean,选中为 true

禁用状态

多选框不可用状态。

设置 disabled 属性即可。

多选框组

适用于多个勾选框绑定到同一个数组的情景,通过 v-model 绑定到同一个数组。

checkbox-group 元素能把多个 checkbox 管理为一组,只需要在 Group 中使用 v-model 绑定 Array 类型的变量即可。 fyo-checkboxlabel 属性是该 checkbox 对应的值,若该标签中无内容,则该属性也充当 checkbox 按钮后的介绍。 label 与数组中的元素值相对应,如果存在指定的值则为选中状态,否则为不选中。

中间状态

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

可选项目数量的限制

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

按钮样式

按钮样式的多选组合。

只需要把 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是否禁用booleanfalse
border是否显示边框booleanfalse
sizeCheckbox 的尺寸string
name原生 name 属性string
checked当前是否勾选booleanfalse
indeterminate设置不确定状态,仅负责样式控制booleanfalse

Checkbox Group Attributes

属性名说明类型默认值
model-value / v-model绑定值array
size多选框组尺寸,仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效string
disabled是否禁用booleanfalse
min可被勾选的 checkbox 的最小数量number
max可被勾选的 checkbox 的最大数量number
text-color按钮形式的 Checkbox 激活时的文本颜色string#ffffff
fill按钮形式的 Checkbox 激活时的填充色和边框色string#e65d6e

Checkbox Group Events

事件名说明回调参数
change绑定值变化时触发的事件更新后的值

Checkbox Events

事件名说明回调参数
change绑定值变化时触发的事件更新后的值