Skip to content

CheckCardGroup 多选卡片组

简介

PlusCheckCardGroup 集成 PlusCheckCard 实现多选功能。

单选用法

多选用法

配置 multiple 可实现多选。

不同尺寸

配置 size 控制整体尺寸大小,当前可选 large,default,small,不同尺寸仅宽度不同。 options 中的 size 优先级更高。

禁用

配置 disabled 控制整体 禁用, options 中的 disabled 优先级更高。

自定义 (render)

注意

render 函数的优先级高于插槽

自定义 (jsx/tsx)

自定义 (插槽)

注意

插槽优先级低于 render

插槽支持整体配置 和个性化配置,整体插槽会改变每一项,个性化插槽可以单独定制其中的某一项。

个性化插槽说明:CheckCardGroup 组件会自动根据配置项的 value 生成对应的插槽,例如下面的配置项,则会自动生成以下名称叫做 [ title-0 ],[ avatar-0] , [ description-0],[ title-1 ],[ avatar-1] 和 [ description-1] 的插槽,插槽的生成规则就是 固定 key 值 [ title- ],[ avatar- ] ,[ description- ] 然后加上 配置项的 valueextra 插槽 也是同样的逻辑 [ extra- ] + value

ts
const options = [
  {
    title: 'title0',
    value: '0',
    description: 'description0',
    avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
  },
  {
    title: 'title1',
    value: '1',
    description: 'description1',
    avatar: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
  }
]

CheckCardGroup API

CheckCardGroup Attributes

名称说明类型默认值是否必须
model-value / v-model绑定值string/number / (array )
options数据数组,支持 PlusCheckCard 的所有 props (modelValue 除外),数组中value 为必选项array
size尺寸string
disabled禁用booleanfalse
multiple多选,当值为truev-model 的类型是对应的数组。booleanfalse

CheckCardGroup Events

名称说明类型
change点击卡片时触发function
extra点击操作栏触发function

CheckCardGroup Slots

插槽名说明作用域插槽参数
avatar(-*)自定义 头像object
title(-*)自定义 标题object
description(-*)自定义 描述object
extra(-*)自定义 操作栏object

提示

-* 表示是个性化插槽,组件会自动根据配置项的 value 生成对应的插槽