Skip to content

ProCheckCard

ProCheckCard 是基于 Naive UI 组件库封装的多功能选择卡片组件。它集成了选择(多选或单选)和卡片样式展示的功能,适用于需要以卡片形式展示内容且支持选择的场景,如商品选择、选项卡等。

基础用法

选项一

这是选项一的描述

选项二

这是选项二的描述

选项三

这是选项三的描述

Default
expand codecollapse code

多选用法

选项一

这是选项一的描述

选项二

这是选项二的描述

选项三

这是选项三的描述

Default
expand codecollapse code

自定义卡片内容

选项一

选项一

这是选项一的描述

选项二

选项二

这是选项二的描述

选项三

选项三

这是选项三的描述

Default
expand codecollapse code

参数

参数类型默认值说明
valueProCheckCardValue | ProCheckCardValue[]undefined选中的值,支持单个值或数组形式(与 modelValue 等效)
modelValueProCheckCardValue | ProCheckCardValue[]undefined选中的值,支持 v-model 双向绑定
optionsArray<Option>[]选项列表,包含每个选项的详细信息
multiplebooleanfalse是否多选模式,默认单选
size'small' | 'medium' | 'large''medium'卡片尺寸大小
disabledbooleanfalse是否禁用整个组件

Option 对象

参数类型默认值说明
labelstring''选项的显示文本
valueProCheckCardValue选项的值,用于绑定和提交数据
disabledbooleanfalse是否禁用该选项
descriptionstring''选项的描述信息,可用于展示更多内容