Checkbox 选项

选项框组件，可以是c-checkbox-group的子组件，也可以单独使用。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
modelValue	Boolean,String,Number,Array	null		All
value	String,Number,Boolean	true	选中时的值	All
inactiveValue	String,Number,Boolean	false	未选中时的值	All
name	String	null	标识	All
label	String,Number	null	标签	All
activeLabel	String	null	选中的标签	All
shape	String	null	选项框形状 none,square,circle,dot	All
btn	Boolean	false	是否按钮样式	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		All
iconSize	Number,String	null	icon尺寸	All
disabled	Boolean	false	是否禁用	All
readonly	Boolean	false	是否只读 与disabled不同之处在于disabled会置灰组件，而readonly则不会	All
disabledLabelClick	Boolean	false	禁用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	right	label位置，right	left
labelFill	Boolean	false	label是否填充整行	All
custom	Boolean	false	设置当前的组件不受父级配置影响	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

注意

选项组件属性优先级低于c-checkbox-group组件，如果需要单独设置选项组件的属性，请设置custom属性为true。

事件

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

插槽

插槽名	说明
default	默认插槽，props值checked
custom	自定义选项，props值checked，会覆盖全部默认内容和样式，完全自己自定义

注意

微信小程序下使用带props的插槽时，需要显试写出<template #default="slotProps">，否则会报错。

<c-checkbox>
    <template #default="{checked}">
      <text>{{checked?'已选':'未选'}}</text>
    </template>
</c-checkbox>

示例

<template>
    <c-checkbox v-model="agreement" label="请阅读并同意《用户协议》" />

    <!-- 完全自定义选项 --->
    <c-checkbox v-model="agreement">
      <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>
</template>