CheckboxGroup 选项组

整合checkbox和radio功能，除去square,circle,dot，button默认样式，还支持高度定制。需配合c-checkbox选项组件使用。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
modelValue	String,Number,Array	null		All
radio	Boolean	false	是否单选	All
allowRadioCancel	Boolean	false	允许单选取消选择	All
layoutRow	Boolean	false	横向布局	All
name	String	null	标识	All
shape	String	null	选项框形状 none,square,circle,dot	All
btn	Boolean	null	是否按钮样式	All
btnProps	Object	null	按钮样式配置 参考c-btn的props配置	All
activeBtnProps	Object	null	激活后的按钮样式	All
color	String	null	选项颜色 支持c-bg-开头的类	All
activeColor	String	null	激活后的选项颜色	All
bdrColor	String	null	边框色 支持c-bdr-开头的类	All
activeBdrColor	String	null	激活后的边框色	All
iconColor	String	null	icon颜色	All
activeIconColor	String	null	激活后的icon颜色	All
iconSize	Number,String	null	icon尺寸	All
disabled	Boolean	null	是否禁用	All
readonly	Boolean	null	是否只读 与disabled不同之处在于disabled会置灰组件，而readonly则不会	All
disabledLabelClick	Boolean	null	禁用label点击选择	All
enableWrapClick	Boolean	false	启用外框点击，启用后，label和checkbox点击将失效	All
labelGutter	Number,String	null	label和选项框之间的距离	All
labelProps	Object	null	标签样式 参考c-text组件的props	All
activeLabelProps	Object	null	选中标签样式 参考c-text组件的props	All
labelPosition	String	null	label位置，right	left
labelFill	Boolean	null	label是否填充整行	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

事件

事件名	说明
update:modelValue
change	{name,value}

插槽

插槽名	说明
default	默认插槽

示例

<template>
    <c-checkbox-group v-model="myRadio" radio layoutRow>
        <c-checkbox label="选项1" :value="1" c-class="c-mr-10" />
        <c-checkbox label="选项2" :value="2" />
        <!-- 完全自定义选项 --->
        <c-checkbox :value="3">
            <template #custom="{checked}">
                <c-box height="80" :bgColor="checked ? 'c-bg-success' : 'c-bg-info'" radius="c-radius-base" c-class="c-f-center">
                    <c-text text="完全自定义选项：" :after="checked?'已选':'未选'" color="#fff" />
                </c-box>
            </template>
        </c-checkbox>
    </c-checkbox-group>
</template>

选项组件SCSS变量

// 选项框的大小
$checkbox-size:28rpx;
// 选项框的label字体大小
$checkbox-label-fontSize:28rpx;
// 选项的下边距
$checkbox-bottom:10rpx;
// 选项的右边距
$checkbox-right:26rpx;