Skip to content

Checkbox 多选框

checkbox

参数

参数说明类型可选值默认值
modelValue / v-model绑定值string / number / boolean
label标识string / number / boolean
disabled是否禁用booleanfalse
size尺寸number40
border是否显示边框booleanfalse
fill是否宽度填充boolean
text是否只显示文字boolean
round是否圆角boolean

事件

事件名称说明回调参数
change绑定值变化时触发的事件选中的 label 值

checkbox-group

参数

参数说明类型可选值默认值
modelValue / v-model绑定值string / number / boolean
disabled是否禁用booleanfalse
border是否显示边框booleanfalse
fill是否宽度填充boolean
text是否只显示文字boolean
round是否圆角boolean

事件

事件名称说明回调参数
change绑定值变化时触发的事件选中的 label 值

插槽

插槽名称说明参数
icon图标插槽

示例

基础用法

html
<cl-checkbox-group v-model="v0">
	<cl-checkbox label="1">炸鸡</cl-checkbox>
	<cl-checkbox label="2">汉堡</cl-checkbox>
	<cl-checkbox label="3">薯条</cl-checkbox>
</cl-checkbox-group>

圆角

html
<cl-checkbox-group v-model="v1" round>
	<cl-checkbox label="1">炸鸡</cl-checkbox>
	<cl-checkbox label="2">汉堡</cl-checkbox>
</cl-checkbox-group>

禁用

html
<cl-checkbox-group v-model="v2">
	<cl-checkbox label="1">炸鸡</cl-checkbox>
	<cl-checkbox disabled label="2">汉堡</cl-checkbox>
</cl-checkbox-group>

开关

html
<cl-checkbox v-model="v3">已阅读并同意《用户协议》及《隐私政策》</cl-checkbox>

边框

html
<cl-checkbox-group v-model="v4">
	<cl-checkbox border label="1">炸鸡</cl-checkbox>
	<cl-checkbox border label="2">汉堡</cl-checkbox>
</cl-checkbox-group>

边框填充

html
<cl-checkbox-group v-model="v5" fill border>
	<cl-checkbox label="1">
		<cl-text align="right" block>鸡米花(靠右)</cl-text>
	</cl-checkbox>
	<cl-checkbox label="2">可乐</cl-checkbox>
	<cl-checkbox label="3">蛋挞</cl-checkbox>
</cl-checkbox-group>

只显示文字

html
<cl-checkbox-group v-model="v6" text border>
	<cl-checkbox label="1">炸鸡</cl-checkbox>
	<cl-checkbox label="2">汉堡</cl-checkbox>
</cl-checkbox-group>

边框圆角

html
<cl-checkbox-group v-model="v7" round border>
	<cl-checkbox label="1">炸鸡</cl-checkbox>
	<cl-checkbox label="2">汉堡</cl-checkbox>
</cl-checkbox-group>

文字贼多

html
<cl-checkbox-group v-model="v8">
	<cl-checkbox label="1"> 汉堡、可乐、鸡肉卷、鸡排、鸡腿、蛋挞、薯条、鸡翅、原味鸡 </cl-checkbox>

	<cl-checkbox label="2"> 鸡块、鸡米发、鸡腿堡 </cl-checkbox>
</cl-checkbox-group>

自定义图标

html
<cl-checkbox-group v-model="v9">
	<cl-checkbox v-for="(item, index) in ['汉堡', '可乐', '薯条']" :key="index" :label="index">
		<template #icon="{ checked }">
			<cl-icon name="like-fill" :size="36" :color="checked ? 'primary' : 'info'" />
		</template>
		{{ item }}
	</cl-checkbox>
</cl-checkbox-group>