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
| 名称 | 类型 | 默认值 | 版本 | 说明 |
|---|---|---|---|---|
| c | string | default | 配置名。使用说明 | |
| props | CheckboxProps | undefined | 全部 props 。 使用说明 | |
| c-class | HTMLAttributes['class'] | undefined | 自定义类名 | |
| c-style | HTMLAttributes['style'] | undefined | 自定义样式 | |
| icon-wrap-class | HTMLAttributes['class'] | undefined | 勾选框的自定义类名 | |
| icon-wrap-style | HTMLAttributes['style'] | undefined | 勾选框的自定义样式 | |
| active-type | 'default' | 'icon' | undefined | 勾选框的类型, undefined | |
| color | string | primary | 字体颜色。 使用说明 | |
| size | string | number | undefined | 字体大小。 使用说明 | |
| value | string | number | undefined | 选中的值 | |
| checked | boolean | undefined | 是否选中 | |
| disabled | boolean | undefined | 是否禁用 | |
| readonly | boolean | undefined | 是否只读 | |
| icon-props | IconProps | undefined | IconProps | |
| text | string | undefined | 显示文字 | |
| text-props | TextProps | undefined | TextProps | |
| border | boolean | undefined | 是否显示边框 | |
| border-bottom | boolean | undefined | 是否显示下边框 | |
| radius | string | number | undefined | 圆角值。 使用说明 | |
| round | boolean | undefined | 是否显示为圆形 | |
| path | string | undefined | CForm value 对象的属性名,用于校验 | |
| no-feedback | boolean | undefined | 是否不展示校验反馈 |
CheckboxGroup Props
| 名称 | 类型 | 默认值 | 版本 | 说明 |
|---|---|---|---|---|
| c | string | default | 配置名。使用说明 | |
| props | CheckboxGroupProps | undefined | 全部 props 。 使用说明 | |
| c-class | HTMLAttributes['class'] | undefined | 自定义类名 | |
| c-style | HTMLAttributes['style'] | undefined | 自定义样式 | |
| value | Array<string | number> | undefined | 选中的值 | |
| disabled | boolean | undefined | 是否禁用 | |
| direction | CSSProperties['flex-direction'] | undefined | 排列。MDN Web Docs | |
| path | string | undefined | CForm value 对象的属性名,用于校验 | |
| checkbox | CheckboxProps | undefined | CheckboxProps |
Checkbox Slots
| 名称 | 参数 | 说明 |
|---|---|---|
| default | () | 文字内容 |
Checkbox Events
| 名称 | 参数 | 说明 |
|---|---|---|
| update:value | (value: string | number) => void | value change 时触发 |
CheckboxGroup Events
| 名称 | 参数 | 说明 |
|---|---|---|
| update:value | (value: Array<string | number>) => void | value change 时触发 |