🎊 Checkbox 复选框​

Checkbox 复选框 ​手机扫码预览23:37组件名：rice-checkbox-group、rice-checkbox在一组备选项中进行多选。

平台兼容性 ​uni-app x ​AndroidiOS鸿蒙Next微信小程序h5√√√√√基础用法 ​通过 v-model 绑定变量，选中意味着变量的值为对应 Checkbox value 属性的值。

html

复选框组 ​复选框组通过 v-model 数组绑定复选框的勾选状态

html

自定义颜色 ​通过 checked-color 设置复选框选中状态下的颜色，Checkbox 中设置的颜色会覆盖 CheckboxGroup 中的值

html

禁用选项 ​在 Checkbox 上 设置 disabled 属性可以禁用该复选框，在 CheckboxGroup 上设置 disabled 会禁用整个复选框

html

限制最大可选数量 ​通过设置 max 属性可以设置最大可选数量，注意 max 只能为数字类型

html

左侧文本 ​设置 icon-position 为 right 文本会显示在左侧，space-between 属性可以使图标和文本两端对齐

html

水平排列 ​设置 direction 为 row 即可水平排列

html

自定义图标 ​可以通过插槽实现自定义图标，插槽会传递 checked 和 disabled 参数

html

不确定状态 ​通过 indeterminate 设置复选框是否为不确定状态

html

:custom-style="{marginBottom:'16px'}" @change="checkAllChange" />

搭配单元格使用 ​html

API ​CheckboxGroup Props ​参数说明类型默认值v-model/model-value选中项绑定值Array-max最大可选数量，0 为不限制number-disabled是否禁用整个 CheckboxGroupbooleanfalsereadonly是否只读booleanfalsedirection排列方向，可选 rowstringcolchecked-color选中状态下的颜色string-icon-sizeicon的大小，单位支持 px和 rpxstring|number20pxlabel-color文字的颜色string-label-size文字的大小，单位支持 px和 rpxstring|number15pxshape形状，可选 圆形：roundstringsquareicon-position选择框的对齐方式，可选rightstringleftspace-between是否水平两端对齐，direction 为 row 时有效booleanfalsecustomStyle自定义styleObject-Checkbox Props ​参数说明类型默认值v-model/model-value选中项绑定值，单独使用Checkbox时该属性才有意义string|number|boolean-value多选框的值string|number|boolean-label多选框的文字string|number\-checked-value选中时的值，单独使用Checkbox时该属性才有意义string|number|booleantrueinchecked-value未选中时的值，单独使用Checkbox时该属性才有意义string|number|booleanfalseindeterminate是否为不确定状态，仅负责样式控制booleanfalsedisabled是否禁用booleanfalsereadonly是否只读booleanfalsechecked-color选中状态下的颜色，如设置此值，将会覆盖CheckboxGroup的activeColor值string-icon-sizeicon的大小，单位支持 px和 rpx，如设置此值，将会覆盖CheckboxGroup的iconSize值string|number20pxlabel-color文字的颜色，如设置此值，将会覆盖CheckboxGroup的labelColor值string-label-size文字的大小，单位支持 px和 rpx，如设置此值，将会覆盖CheckboxGroup的labelSize值string|number15pxshape形状，可选 圆形：round，如设置此值，将会覆盖CheckboxGroup的shape值stringsquareicon-position选择框的对齐方式，可选right，如设置此值，将会覆盖CheckboxGroup的iconPosition值stringleftspace-between是否水平两端对齐，direction 为 vertical 时有效，如设置此值，将会覆盖CheckboxGroup的spaceBetween值booleanfalsecustomStyle自定义styleObject-CheckboxGroup Events ​事件名说明回调参数change绑定值改变时触发value:ArrayCheckbox Events ​事件名说明回调参数change绑定值改变时触发value:string|number|booleanCheckbox Slots ​名称说明参数default自定义文本{ checked : boolean, disabled : boolean }icon自定义图标{ checked : boolean, disabled : boolean }类型定义 ​组件导出如下类型

tsimport { CheckboxDirection, CheckboxShape, CheckboxIconPosition, CheckboxValueType } from '@/uni_modules/rice-ui'

// 组件类型

const checkboxGroupRef = ref(null)

const checkboxRef = ref(null)