Card 卡片

简介

内容区块容器：标题、副标题、操作区、页脚与折叠能力，可选边框、阴影与浮起效果。

代码演示

基础使用

工作台顶部的问候卡：只有内容区，没有标题区，也不带外框以外的装饰。

<template>
  <co-card>
    <div class="greeting">
      <el-avatar :size="44" class="avatar">张</el-avatar>

      <div class="text">
        <div class="title">早上好，张明</div>
        <div class="desc">今天有 3 个待审批的采购单、2 条新的系统通知。</div>
      </div>

      <el-button type="primary" plain>去处理</el-button>
    </div>
  </co-card>
</template>

<script lang="ts" setup></script>

<style scoped>
.greeting {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar {
  flex: none;
  font-size: 16px;
  background-color: var(--el-color-primary-light-8);
  color: var(--el-color-primary);
}

.text {
  flex: 1;
  min-width: 0;
}

.title {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.desc {
  margin-top: 4px;
  font-size: 13px;
  color: var(--el-text-color-regular);
}
</style>

标题、副标题与操作区

title / sub-title 组成标题区，extra 插槽放右侧的时间切换、导出这类操作，tooltip 在标题后补一个说明图标。指标卡、报表卡都是这个结构。

<template>
  <co-card title="本月销售额" sub-title="较上月 +12.4%" tooltip="数据来自订单中心，每小时同步一次">
    <template #extra>
      <el-radio-group v-model="range" size="small">
        <el-radio-button value="week">近 7 天</el-radio-button>
        <el-radio-button value="month">近 30 天</el-radio-button>
      </el-radio-group>
    </template>

    <div class="metric">¥ {{ amount }}</div>
    <div class="hint">含税金额，已剔除退款订单</div>
  </co-card>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';

const range = ref('month');

const amount = computed(() => (range.value === 'month' ? '1,286,400' : '318,900'));
</script>

<style scoped>
.metric {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--el-text-color-primary);
  font-variant-numeric: tabular-nums;
}

.hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
</style>

折叠

collapsible="header" 时整个标题区都可以点，collapsible（或 icon）只点右侧箭头；v-model:collapsed 可以把折叠状态交给外部控制。适合筛选条、设置面板这类默认收起更省地方的区域。

<template>
  <co-card v-model:collapsed="collapsed" title="筛选条件" collapsible="header">
    <template #extra>{{ collapsed ? '已收起' : '点击标题区收起' }}</template>

    <div class="fields">
      <el-input v-model="query.keyword" class="field" placeholder="订单号 / 客户名称" clearable />

      <el-select v-model="query.status" class="field" placeholder="订单状态" clearable>
        <el-option label="待付款" value="pending" />
        <el-option label="待发货" value="paid" />
        <el-option label="已完成" value="done" />
      </el-select>

      <el-date-picker
        v-model="query.date"
        class="field"
        type="date"
        placeholder="下单日期"
        value-format="YYYY-MM-DD"
      />

      <div class="actions">
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button @click="onReset">重置</el-button>
      </div>
    </div>
  </co-card>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';

const collapsed = ref(false);

const query = reactive<{ keyword: string; status: string; date: string }>({
  keyword: '',
  status: '',
  date: '',
});

const onSearch = () => {
  ElMessage.success(`已查询：${query.keyword || '全部订单'}`);
};

const onReset = () => {
  query.keyword = '';
  query.status = '';
  query.date = '';
};
</script>

<style scoped>
.fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.field {
  width: 200px;
}

.actions {
  display: flex;
  gap: 8px;
  margin-inline-start: auto;
}
</style>

内嵌分区

外层卡片里再套 type="inner" 的卡片做二级分区，标题区带底色区分层级。订单详情、工单详情这种「主信息 + 若干附属块」的结构用它。

<template>
  <co-card title="订单 A20241102001" sub-title="2024-11-02 10:24 下单">
    <template #extra>
      <el-tag size="small" type="success">已发货</el-tag>
    </template>

    <div class="goods">
      <span class="name">云音乐会员年卡</span>
      <span class="qty">× 1</span>
      <span class="price">¥ 168.00</span>
    </div>

    <div class="group">
      <co-card type="inner" title="收货信息">
        <p class="line">上海市徐汇区漕河泾开发区 28 号楼 1601 · 张明 · 138 0000 6021</p>
      </co-card>

      <co-card type="inner" title="物流进度">
        <p class="line">顺丰速运 SF1029384756 · 11-03 09:12 已签收</p>
      </co-card>
    </div>
  </co-card>
</template>

<script lang="ts" setup></script>

<style scoped>
.goods {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  font-size: 13px;
  color: var(--el-text-color-regular);
}

.name {
  flex: 1;
  min-width: 0;
  color: var(--el-text-color-primary);
}

.qty {
  color: var(--el-text-color-secondary);
}

.price {
  font-variant-numeric: tabular-nums;
}

.group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.line {
  margin: 0;
  font-size: 13px;
  color: var(--el-text-color-regular);
}
</style>

尺寸与形态

size="small" 用于侧栏、抽屉这类紧凑容器；variant="borderless" 去掉外框，配 hoverable 做可点击的入口块。

<template>
  <div class="wrap">
    <co-card size="small" title="我的待办" class="todo-card">
      <div v-for="todo in todos" :key="todo.label" class="todo">
        <span>{{ todo.label }}</span>
        <el-tag size="small" effect="plain" :type="todo.type">{{ todo.count }}</el-tag>
      </div>
    </co-card>

    <div class="entries">
      <co-card v-for="entry in entries" :key="entry.label" variant="borderless" hoverable>
        <div class="entry">
          <span class="entry-name">{{ entry.label }}</span>
          <span class="entry-desc">{{ entry.desc }}</span>
        </div>
      </co-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
const todos = [
  { label: '待审批采购单', count: 3, type: 'warning' as const },
  { label: '待发货订单', count: 12, type: 'primary' as const },
  { label: '待处理工单', count: 5, type: 'danger' as const },
];

const entries = [
  { label: '我的订单', desc: '查看与售后' },
  { label: '发票管理', desc: '开票与下载' },
  { label: '团队成员', desc: '12 人' },
  { label: '接口密钥', desc: '2 个有效' },
];
</script>

<style scoped>
.wrap {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.todo-card {
  width: 220px;
  flex: none;
}

.todo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 6px;
  font-size: 13px;
  color: var(--el-text-color-regular);
}

.entries {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.entry {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.entry-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.entry-desc {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
</style>

页脚与自定义样式

footer 属性或 footer 插槽给卡片补一块页脚，放提交人、金额、操作按钮这类收尾信息。页脚在折叠区域之外，卡片收起时仍然可见可点。

header-class / body-class / footer-class 与对应的 *-style 分别作用在三个区域上，做告警、选中态这类整块着色时不用再包一层容器。

<template>
  <div class="stack">
    <co-card title="采购单 PO-20241102-06" footer="提交人 李婷 · 金额 ¥ 12,800.00" collapsible>
      <p class="line">办公椅 20 把，补充 3 楼新工位。期望 11 月 15 日前到货。</p>
    </co-card>

    <co-card
      title="接口调用额度即将用尽"
      header-class="tinted"
      body-class="tinted"
      footer-class="tinted"
      :header-style="{ borderBlockEndColor: 'var(--el-color-warning)' }"
    >
      <p class="line">本月已使用 96%（48.2 万 / 50 万次），超出后请求会被限流 1 小时。</p>

      <template #footer>
        <div class="actions">
          <el-button size="small">查看用量明细</el-button>
          <el-button size="small" type="primary">申请扩容</el-button>
        </div>
      </template>
    </co-card>
  </div>
</template>

<script lang="ts" setup></script>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 这三块都在子组件里，类名要穿透 scoped */
:deep(.tinted) {
  background-color: var(--el-fill-color-lighter);
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.line {
  margin: 0;
  font-size: 13px;
  color: var(--el-text-color-regular);
}
</style>

内容区滚动

内容区常驻 overflow: auto：根元素高度被限制（直接给 height / max-height，或由父级布局决定）时内部滚动，否则由内容撑开。

<template>
  <div class="stack">
    <co-card title="系统通知" style="max-height: 232px">
      <template #extra>共 {{ notices.length }} 条</template>

      <div v-for="notice in notices" :key="notice.title" class="notice">
        <div class="notice-title">{{ notice.title }}</div>
        <div class="notice-time">{{ notice.time }}</div>
      </div>
    </co-card>

    <!-- 侧栏这种高度由布局决定的容器，卡片自己不用给高度 -->
    <div class="panel">
      <co-card title="部门成员">
        <div v-for="member in members" :key="member.name" class="member">
          <span>{{ member.name }}</span>
          <span class="role">{{ member.role }}</span>
        </div>
      </co-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
const notices = [
  { title: '订单 A20241102001 已完成签收', time: '11-03 09:12' },
  { title: '采购单 PO-20241102-06 等待你审批', time: '11-03 08:40' },
  { title: '接口调用额度已使用 96%', time: '11-02 22:05' },
  { title: '运营部新增成员 1 人', time: '11-02 17:31' },
  { title: '11 月对账单已生成', time: '11-02 09:00' },
  { title: '系统将于 11-05 02:00 维护', time: '11-01 20:18' },
  { title: '退款单 R20241101008 已处理', time: '11-01 15:02' },
];

const members = [
  { name: '张明', role: '产品经理' },
  { name: '李婷', role: '采购' },
  { name: '王建国', role: '前端' },
  { name: '陈雨', role: '设计' },
  { name: '赵伟', role: '后端' },
  { name: '孙倩', role: '测试' },
  { name: '周琦', role: '运维' },
];
</script>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.notice {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block: 6px;
  font-size: 13px;
}

.notice-title {
  flex: 1;
  min-width: 0;
  color: var(--el-text-color-primary);
}

.notice-time {
  flex: none;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  font-variant-numeric: tabular-nums;
}

.panel {
  display: flex;
  flex-direction: column;
  height: 200px;
  padding: 8px;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
}

.panel .co-card {
  flex: 1;
}

.member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 5px;
  font-size: 13px;
  color: var(--el-text-color-primary);
}

.role {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
</style>

API

CardProps

属性	描述	类型	默认值
size	尺寸	medium | small	medium
variant	形态	outlined | borderless	outlined
hoverable	鼠标移入时浮起	boolean	false
title	卡片标题	string	-
sub-title	卡片副标题	string	-
footer	卡片页脚，footer 插槽优先	string	-
type	卡片类型，inner 为内嵌卡片（标题区带底色、无边框）	inner	-
collapsible	折叠方式：icon 右侧图标 / header 整块标题区 / false 不可折叠	boolean | icon | header	false
collapsed	是否折叠，配合 v-model:collapsed	boolean	false
tooltip	标题右侧的提示说明	string	-
box-shadow	显示阴影	boolean	false
header-class	标题区的额外类名	string | array | object	-
header-style	标题区的额外样式	CSSProperties	-
body-class	内容区的额外类名	string | array | object	-
body-style	内容区的额外样式（height / flex / overflow 由折叠动画接管）	CSSProperties	-
footer-class	页脚的额外类名	string | array | object	-
footer-style	页脚的额外样式	CSSProperties	-

CardSlots

插槽	描述	属性
default	内容	-
header	整块替换标题区内容（折叠按钮仍由卡片渲染）	-
title	自定义标题	-
subTitle	自定义副标题	-
extra	右上角操作区	-
footer	自定义页脚	-

CardEmits

事件	描述	类型
click	点击时触发	(event: MouseEvent) => void
update:collapsed	折叠状态变化	(collapsed: boolean) => void

说明

collapsible 默认是 icon，但只有卡片存在标题区（title / sub-title / tooltip / extra / 对应插槽）时才会渲染折叠按钮；没有标题区的卡片不会出现折叠入口。

需要「固定高度 + 内部滚动」的分区，直接给卡片根元素限制高度（height / max-height，或在 flex 布局里让父级决定），内容区会自己滚动；原来独立的 co-panel 已合并到本组件。