Checkbox 复选框

用于在一组备选项中进行多选。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 v-model 绑定复选框的勾选状态。

<zq-checkbox v-model="checked" label="复选框" />

const checked = ref(false)

禁用状态

通过 disabled 属性禁用复选框。

<zq-checkbox v-model="checked" label="禁用" disabled />

自定义形状

通过 shape 属性设置形状，支持 round（圆形）和 square（方形）。

<zq-checkbox v-model="checked" shape="round" label="圆形" />
<zq-checkbox v-model="checked" shape="square" label="方形" />

自定义颜色

通过 checked-color 属性自定义选中时的颜色。

<zq-checkbox v-model="checked" checked-color="#07c160" label="自定义颜色" />

自定义图标大小

通过 icon-size 属性设置图标大小。

<zq-checkbox v-model="checked" :icon-size="20" label="大图标" />

标签位置

通过 label-position 属性设置标签位置，支持 left 和 right。

<zq-checkbox v-model="checked" label-position="left" label="左侧标签" />

通过插槽自定义标签

<zq-checkbox v-model="checked">
  <text>自定义内容</text>
</zq-checkbox>

API

Props

参数	说明	类型	默认值
v-model	是否选中	boolean	false
label	标签文字	string	''
disabled	是否禁用	boolean	false
shape	形状	'round' | 'square'	'round'
checked-color	选中时的颜色	string	''
icon-size	图标大小	number	14
label-position	标签位置	'left' | 'right'	'right'

Events

事件名	说明	回调参数
update:modelValue	选中状态变化时触发	value: boolean
change	选中状态变化时触发	value: boolean

Slots

名称	说明
default	自定义标签内容，优先级高于 label 属性

主题定制

变量名	说明
--color-primary	选中时默认背景色/边框色
--color-border	未选中时边框色
--color-text-primary	标签文字颜色
--color-text-disabled	禁用时标签颜色