Skip to content

Checkbox 复选框

基本使用

template
<c-checkbox text="checkbox" v-model:checked="checked" />

<c-checkbox text="圆形框" icon-wrap-style="border-radius: 100%;" />

<c-checkbox-group c="row" v-model:value="values">
  <c-checkbox v-for="i in 3" :key="i" :text="'checkbox' + i" />
</c-checkbox-group>

颜色

template
<c-checkbox color="error" text="text" checked />
<c-checkbox color="success" text="text" checked />
<c-checkbox color="#7546c9" text="text" checked />
<c-checkbox color="#7546c9" text="text" checked active-type="icon" />

<c-checkbox-group :checkbox="{ color: 'error' }">
  <c-checkbox text="text" />
</c-checkbox-group>

选中的图标

template
<c-checkbox text="minus" c="minus" checked />
<c-checkbox text="indeterminate" c="indeterminate" checked />
<c-checkbox text="active icon" active-type="icon" checked />

右对齐的图标

template
<c-checkbox-group c="right">
  <c-checkbox text="text" border />
</c-checkbox-group>

API

Checkbox Props

名称类型默认值版本说明
cstringdefault配置名。使用说明
propsCheckboxPropsundefined全部 props 。 使用说明
c-classHTMLAttributes['class']undefined自定义类名
c-styleHTMLAttributes['style']undefined自定义样式
icon-wrap-classHTMLAttributes['class']undefined勾选框的自定义类名
icon-wrap-styleHTMLAttributes['style']undefined勾选框的自定义样式
active-type'default' | 'icon'undefined勾选框的类型, undefined
colorstringprimary字体颜色。 使用说明
sizestring | numberundefined字体大小。 使用说明
valuestring | numberundefined选中的值
checkedbooleanundefined是否选中
disabledbooleanundefined是否禁用
readonlybooleanundefined是否只读
icon-propsIconPropsundefinedIconProps
textstringundefined显示文字
text-propsTextPropsundefinedTextProps
borderbooleanundefined是否显示边框
border-bottombooleanundefined是否显示下边框
radiusstring | numberundefined圆角值。 使用说明
roundbooleanundefined是否显示为圆形
pathstringundefinedCForm value 对象的属性名,用于校验
no-feedbackbooleanundefined是否不展示校验反馈

CheckboxGroup Props

名称类型默认值版本说明
cstringdefault配置名。使用说明
propsCheckboxGroupPropsundefined全部 props 。 使用说明
c-classHTMLAttributes['class']undefined自定义类名
c-styleHTMLAttributes['style']undefined自定义样式
valueArray<string | number>undefined选中的值
disabledbooleanundefined是否禁用
directionCSSProperties['flex-direction']undefined排列。MDN Web Docs
pathstringundefinedCForm value 对象的属性名,用于校验
checkboxCheckboxPropsundefinedCheckboxProps

Checkbox Slots

名称参数说明
default()文字内容

Checkbox Events

名称参数说明
update:value(value: string | number) => voidvalue change 时触发

CheckboxGroup Events

名称参数说明
update:value(value: Array<string | number>) => voidvalue change 时触发