BizCheckCard 可选卡片

卡片组选择器：单选 / 多选（v-model），选中态主色描边 + 右上角标勾选图标，支持缩略图（thumb）、描述文案、单项禁用、整体禁用、尺寸（对齐 Element Plus）、列数布局；default slot 完全接管卡片内容。模板选择、套餐 / 方案选择、支付方式选择、权限模板选择——替代形态过于简陋的 el-check-tag / radio 场景。

基础用法

标准模板

适用于常规业务单据打印

专业模板

含企业抬头与电子签章区域

极简模板

仅保留核心字段，节省纸张

当前选择：standard

单选卡片：选中主色描边 + 角标，v-model 绑定选项 value。

<script setup lang="ts">
/** 场景：模板选择——单选卡片，选中主色描边 + 角标 */
import { ref } from 'vue'
import { BizCheckCard } from 'vue3-ep-biz-lib'
import type { BizCheckCardItem } from 'vue3-ep-biz-lib'

const data: BizCheckCardItem[] = [
  { value: 'standard', label: '标准模板', description: '适用于常规业务单据打印' },
  { value: 'professional', label: '专业模板', description: '含企业抬头与电子签章区域' },
  { value: 'simple', label: '极简模板', description: '仅保留核心字段，节省纸张' },
]

const picked = ref<string | number>('standard')
</script>

<template>
  <div style="max-width: 640px">
    <BizCheckCard v-model="picked" :data="data" />
    <p style="margin-top: 10px; font-size: 13px; color: #909399">当前选择：{{ picked }}</p>
  </div>
</template>

显示代码

多选形态

短信通知

工单状态变化即时推送

邮件日报

每日 18:00 汇总发送

企微提醒

绑定企业微信接收

已选：sms

multiple 多选（v-model 为数组），change 附带触发项。

<script setup lang="ts">
/** 场景：套餐搭配——multiple 多选 + cancelable 单选可取消 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizCheckCard } from 'vue3-ep-biz-lib'
import type { BizCheckCardItem } from 'vue3-ep-biz-lib'

const data: BizCheckCardItem[] = [
  { value: 'sms', label: '短信通知', description: '工单状态变化即时推送' },
  { value: 'email', label: '邮件日报', description: '每日 18:00 汇总发送' },
  { value: 'wechat', label: '企微提醒', description: '绑定企业微信接收' },
]

const picked = ref<Array<string | number>>(['sms'])

const onChange = (
  value: string | number | Array<string | number> | undefined,
  item: BizCheckCardItem
): void => {
  const count = Array.isArray(value) ? value.length : value === undefined ? 0 : 1
  ElMessage.info(`切换「${item.label}」，当前 ${count} 项`)
}
</script>

<template>
  <div style="max-width: 640px">
    <BizCheckCard v-model="picked" :data="data" multiple @change="onChange" />
    <p style="margin-top: 10px; font-size: 13px; color: #909399">
      已选：{{ picked.join('、') || '（未选）' }}
    </p>
  </div>
</template>

显示代码

缩略图与列数

余额支付

可用余额 ¥3,260.00

微信支付

扫码支付立减 ¥2

对公转账

本月额度已用完

column=3 网格布局；「对公转账」单项禁用置灰

thumb 缩略图（SVG 内联免外网依赖），column 网格列数，单项 disabled 置灰。

<script setup lang="ts">
/** 场景：支付方式——thumb 缩略图 + 单项禁用 */
import { ref } from 'vue'
import { BizCheckCard } from 'vue3-ep-biz-lib'
import type { BizCheckCardItem } from 'vue3-ep-biz-lib'

/** SVG 内联缩略图，免外网依赖 */
const icon = (color: string, text: string): string =>
  `data:image/svg+xml;utf8,${encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42"><rect width="42" height="42" rx="6" fill="${color}"/><text x="21" y="27" font-size="13" fill="#fff" text-anchor="middle" font-family="sans-serif">${text}</text></svg>`
  )}`

const data: BizCheckCardItem[] = [
  { value: 'balance', label: '余额支付', description: '可用余额 ¥3,260.00', thumb: icon('#409eff', '余') },
  { value: 'wechat', label: '微信支付', description: '扫码支付立减 ¥2', thumb: icon('#22c55e', '微') },
  { value: 'corporate', label: '对公转账', description: '本月额度已用完', thumb: icon('#909399', '公'), disabled: true },
]

const picked = ref<string | number>('balance')
</script>

<template>
  <div style="max-width: 640px">
    <BizCheckCard v-model="picked" :data="data" :column="3" />
    <p style="margin-top: 10px; font-size: 13px; color: #909399">
      column=3 网格布局；「对公转账」单项禁用置灰
    </p>
  </div>
</template>

显示代码

自定义卡片

基础版

¥99 /月

10 人 / 50GB

团队版当前方案

¥299 /月

50 人 / 500GB

旗舰版

¥899 /月

不限 / 2TB

default slot 接管卡片内容（套餐价格），作用域 { item, selected, index }。

<script setup lang="ts">
/** 场景：自定义卡片——default slot 接管内容（指标 + 价格），作用域含 selected */
import { ref } from 'vue'
import { BizCheckCard } from 'vue3-ep-biz-lib'
import type { BizCheckCardItem } from 'vue3-ep-biz-lib'

interface PlanItem extends BizCheckCardItem {
  price: number
  quota: string
}

const data: PlanItem[] = [
  { value: 'basic', label: '基础版', price: 99, quota: '10 人 / 50GB' },
  { value: 'team', label: '团队版', price: 299, quota: '50 人 / 500GB' },
  { value: 'flagship', label: '旗舰版', price: 899, quota: '不限 / 2TB' },
]

const picked = ref<string | number>('team')
</script>

<template>
  <div style="max-width: 720px">
    <BizCheckCard v-model="picked" :data="data" :column="3" size="large">
      <template #default="{ item, selected }">
        <div style="display: flex; flex-direction: column; gap: 6px; width: 100%">
          <div style="display: flex; align-items: center; justify-content: space-between">
            <span style="font-size: 15px; font-weight: 600">{{ (item as PlanItem).label }}</span>
            <span v-if="selected" style="font-size: 12px; color: var(--el-color-primary)">当前方案</span>
          </div>
          <div style="font-size: 22px; font-weight: 700; color: var(--el-color-primary)">
            ¥{{ (item as PlanItem).price }}
            <span style="font-size: 12px; font-weight: 400; color: var(--el-text-color-secondary)">/月</span>
          </div>
          <div style="font-size: 12px; color: var(--el-text-color-secondary)">
            {{ (item as PlanItem).quota }}
          </div>
        </div>
      </template>
    </BizCheckCard>
  </div>
</template>

显示代码

禁用与可取消

整体禁用

单选可取消

只读权限

可查看全部页面

操作权限

新增 / 编辑业务数据

管理权限

含用户与授权管理

当前值：view　·　卡片支持 Tab 聚焦 + Enter / Space 选中

整体禁用、cancelable 单选再次点击取消（值为 undefined）；卡片可 Tab 聚焦 + Enter / Space 选中（键盘可达）。

<script setup lang="ts">
/** 场景：禁用与可取消——整体禁用、cancelable 单选再点取消、键盘可达（Enter / Space 选中） */
import { ref } from 'vue'
import { ElSwitch } from 'element-plus'
import { BizCheckCard } from 'vue3-ep-biz-lib'
import type { BizCheckCardItem } from 'vue3-ep-biz-lib'

const data: BizCheckCardItem[] = [
  { value: 'view', label: '只读权限', description: '可查看全部页面' },
  { value: 'operate', label: '操作权限', description: '新增 / 编辑业务数据' },
  { value: 'admin', label: '管理权限', description: '含用户与授权管理' },
]

const picked = ref<string | number | undefined>('view')
const disabled = ref(false)
const cancelable = ref(true)
</script>

<template>
  <div style="max-width: 640px">
    <div style="margin-bottom: 12px; display: flex; align-items: center; gap: 16px">
      <span style="font-size: 13px">整体禁用</span>
      <ElSwitch v-model="disabled" />
      <span style="font-size: 13px">单选可取消</span>
      <ElSwitch v-model="cancelable" />
    </div>
    <BizCheckCard
      v-model="picked"
      :data="data"
      :disabled="disabled"
      :cancelable="cancelable"
    />
    <p style="margin-top: 10px; font-size: 13px; color: #909399">
      当前值：{{ picked ?? '（未选择，已取消）' }}　·　卡片支持 Tab 聚焦 + Enter / Space 选中
    </p>
  </div>
</template>

显示代码

尺寸与布局

largedefaultsmall

列数：3

数据看板

核心指标一屏总览

报表中心

自定义报表与订阅

工单系统

客服工单流转

库存管理

出入库与盘点

会员运营

分层触达与转化

权限管理

角色与数据授权

已选 2 项：1、3

size 三档尺寸 + column 列数联动调整。

<script setup lang="ts">
/** 场景：尺寸与布局——size 三档 + column 列数控制 */
import { ref } from 'vue'
import { ElRadioButton, ElRadioGroup, ElSlider } from 'element-plus'
import { BizCheckCard } from 'vue3-ep-biz-lib'
import type { BizCheckCardItem, BizCheckCardSize } from 'vue3-ep-biz-lib'

const data: BizCheckCardItem[] = [
  { value: 1, label: '数据看板', description: '核心指标一屏总览' },
  { value: 2, label: '报表中心', description: '自定义报表与订阅' },
  { value: 3, label: '工单系统', description: '客服工单流转' },
  { value: 4, label: '库存管理', description: '出入库与盘点' },
  { value: 5, label: '会员运营', description: '分层触达与转化' },
  { value: 6, label: '权限管理', description: '角色与数据授权' },
]

const picked = ref<Array<string | number>>([1, 3])
const size = ref<BizCheckCardSize>('default')
const column = ref(3)
</script>

<template>
  <div style="max-width: 760px">
    <div style="margin-bottom: 12px; display: flex; align-items: center; gap: 16px">
      <ElRadioGroup v-model="size">
        <ElRadioButton value="large">large</ElRadioButton>
        <ElRadioButton value="default">default</ElRadioButton>
        <ElRadioButton value="small">small</ElRadioButton>
      </ElRadioGroup>
      <span style="font-size: 13px">列数：{{ column }}</span>
      <ElSlider v-model="column" :min="2" :max="4" :step="1" style="width: 120px" />
    </div>
    <BizCheckCard v-model="picked" :data="data" multiple :size="size" :column="column" />
    <p style="margin-top: 10px; font-size: 13px; color: #909399">
      已选 {{ picked.length }} 项：{{ picked.join('、') }}
    </p>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
data	BizCheckCardItem[]	[]	选项数据（value / label / description / thumb / disabled）
v-model	string | number | Array<string | number>	—	单选值或多选值数组（随 multiple 切换形态）
multiple	boolean	false	多选形态
cancelable	boolean	false	单选时再次点击已选项可取消（值为 undefined）
disabled	boolean	false	整体禁用
size	'large' | 'default' | 'small'	'default'	尺寸
column	number	0	网格列数（0 = flex 自适应换行）

Events

事件名	参数	说明
update:model-value	(value)	选中值变化（v-model）
change	(value, item)	点击选择时触发，item 为触发项

Slots

插槽名	说明
default	卡片内容，作用域 { item, selected, index }（不传时渲染缩略图 + 标题 + 描述）

TIP

表单集成：配合 el-form-item 时以 v-model 值做校验即可；选项值建议统一 string / number 类型，避免混用导致选中判断失效。