Card 卡片
最基础的卡片容器，支持标题、封面、操作区、多种变体与尺寸。
基础用法
包含标题、内容和底部操作的简单卡片：
卡片标题
卡片内容，这是最基本的卡片用法。卡片可以包含任何内容。
卡片变体
通过 variant 设置不同外观风格：
默认
默认边框卡片
强调边框
主题色边框卡片
阴影
阴影风格卡片
尺寸
通过 size 设置卡片大小，支持 sm / md / lg 三种尺寸：
小卡片
小尺寸
中卡片
中等尺寸（默认）
大卡片
大尺寸
悬停效果
设置 hoverable 让鼠标悬停时显示阴影提升效果：
可悬停
鼠标悬停试试，会有阴影提升效果。
可悬停
默认变体也可以悬停。
带封面
使用 #cover 插槽添加卡片封面图片：
风景摄影
在封面插槽中放置图片，图片宽度自动撑满卡片。
头部额外内容
通过 header-extra 属性或 #header-extra 插槽在标题右侧展示额外信息：
订单详情
2024-01-15
订单编号：NACR-20240115-001
订单金额：¥299.00
操作区
使用 #actions 插槽在卡片底部添加操作按钮：
项目配置
当前环境：生产环境
版本号：v2.4.1
分段卡片
设置 segmented 让卡片内容区域之间使用分隔线代替边框，视觉更紧凑：
分段卡片
卡片内容区域，分段模式下各区域之间使用细线分隔。
可关闭
设置 closable 显示关闭按钮，关闭时触发 close 事件：
可关闭卡片
点击右上角关闭按钮可以关闭此卡片。
可折叠
设置 collapsible 让卡片可以折叠/展开，支持 v-model:collapsed 双向绑定：
可折叠卡片
点击标题栏右侧箭头图标即可折叠/展开卡片内容。
折叠时只显示标题栏，展开时显示完整内容。
自定义头部
使用 #header 插槽完全自定义头部内容，设置后 title 属性无效：
Z
张三
高级工程师
自定义头部可以使用头像、标签等任何内容，完全自由布局。
组合使用
卡片内嵌套组合多个组件，构建复杂信息展示：
团队成员
李
李明前端开发
在线王
王芳产品设计
忙碌赵
赵强后端开发
离线Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | '' | 卡片标题 |
variant | 'default' | 'bordered' | 'shadow' | 'default' | 卡片变体样式 |
size | 'sm' | 'md' | 'lg' | 'md' | 卡片尺寸 |
hoverable | boolean | false | 鼠标悬停时是否显示悬浮效果 |
bordered | boolean | false | 是否显示边框（仅非 bordered 变体时有效） |
segmented | boolean | false | 是否使用分段样式（分隔线代替边框） |
closable | boolean | false | 是否显示关闭按钮 |
collapsible | boolean | false | 是否可折叠 |
header-extra | string | '' | 标题右侧额外文字 |
Events
| 事件名 | 参数 | 说明 |
|---|---|---|
close | - | 点击关闭按钮时触发 |
update:collapsed | (collapsed: boolean) | 折叠状态变化时触发 |
Slots
| 插槽名 | 说明 |
|---|---|
default | 卡片主体内容 |
header | 自定义头部区域，设置后 title 属性无效 |
header-extra | 头部右侧额外内容，设置后 header-extra 属性无效 |
cover | 卡片封面图区域 |
actions | 卡片操作按钮区域 |
footer | 卡片底部区域 |