Element Plus Card 组件完全指南容器布局、阴影控制与源码级解析【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plusElement Plus 的 Card卡片组件用于将标题、正文、操作区域等信息整合进一个统一的卡片容器中是构建仪表盘、内容列表与详情展示的常用基础组件。本文将基于 官方文档 全面讲解 Card 的三种典型用法、全部属性与插槽 API并结合仓库内 组件实现源码、Props 类型定义 与 单元测试 深入剖析其底层渲染机制读完即可在真实项目中灵活组合 header、body、footer 与阴影策略。组件定位与基本结构Card 的核心定位是信息整合容器它把标题、内容和操作区域封装在同一个视觉单元中。从 card.vue 的模板结构 可以看到组件对外呈现为三段式结构header可选头部区域存在header属性或#header插槽时才渲染body默认主体区域始终渲染承载默认插槽内容footer可选底部区域存在footer属性或#footer插槽时才渲染。其中 header 与 footer 均为可选段内容分发依赖具名插槽。整个根节点会根据shadow属性动态追加is-always-shadow、is-hover-shadow或is-never-shadow修饰类对应 card.scss 中的状态样式。基础用法header、body 与 footer 三段式布局基础场景下Card 由标题、正文和底部操作区三部分组成。官方示例 docs/examples/card/basic.vue 展示了完整用法template el-card stylemax-width: 480px template #header div classcard-header spanCard name/span /div /template p v-foro in 4 :keyo classtext item{{ List item o }}/p template #footerFooter content/template /el-card /template要点说明头部通过#header具名插槽传入可以是任意 DOM也可以退而使用header字符串属性两者等价源码中v-if$slots.header || header同时监听插槽与属性见 card.vue。正文直接写在默认插槽中本例循环渲染 4 条列表项。底部通过#footer具名插槽渲染Footer content适合放置操作按钮等元素。单元测试 card.test.tsx 验证了两种头部传值方式字符串属性headerI am header与 VNode 插槽包含 span 与 button 的复杂 DOM都能正确渲染说明插槽方式支持更灵活的富内容。简单卡片省略头部当页面只需要纯内容展示时可以省略头部区域。官方示例 docs/examples/card/simple.vue 是最精简形态template el-card stylemax-width: 480px p v-foro in 4 :keyo classtext item{{ List item o }}/p /el-card /template此时既不传header属性也没有#header插槽模板中的头部div不会渲染卡片退化为纯 body 容器。footer 同理只有提供对应属性或插槽时才渲染。带图片的卡片body-style 自定义正文样式通过body-style属性可以为正文区域注入自定义 CSS 样式从而让卡片承载图片、富媒体等更丰富的内容。官方示例 docs/examples/card/with-images.vuetemplate el-card stylemax-width: 480px template #headerYummy hamburger/template img srchttps://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png stylewidth: 100% / /el-card /templatebody-style的类型为 Vue 的StyleValue。从 card.ts 的属性定义 可以看到它通过definePropTypeStyleValue([String, Object, Array, Boolean])声明即同时支持字符串形式如font-size: 14px;对象形式如{ font-size: 14px }数组形式如[{ font-size: 14px }, { color: blue }]多个样式对象合并生效。单元测试 对这三种形式逐一断言验证最终都会正确落在.el-card__body元素的内联style属性上。此外body-style的值会直接绑定到 body 的:style上见 card.vue因此也支持以;分隔的多条声明。阴影控制always、hover 与 nevershadow属性决定卡片阴影的显示时机可选值为always始终显示、hover悬停时显示与never从不显示默认always。官方示例 docs/examples/card/shadow.vuetemplate div classflex flex-wrap gap-4 el-card stylewidth: 480px shadowalwaysAlways/el-card el-card stylewidth: 480px shadowhoverHover/el-card el-card stylewidth: 480px shadowneverNever/el-card /div /template底层实现上根节点类名由ns.is(${shadow || globalConfig?.shadow || always}-shadow)计算见 card.vue再配合 card.scss 中.is-always-shadow与.is-hover-shadow的 box-shadow 规则hover模式还监听了:focus状态。值得注意的细节shadow属性默认值为undefined最终回落到always支持从ConfigProvider的全局配置中读取默认阴影策略useGlobalConfig(card)即项目级统一定义卡片阴影风格单元测试 确认了类名拼接逻辑例如shadowalways会生成.is-always-shadow类。完整 API 参考以下 API 信息与官方文档 card.md 保持一致并结合 card.ts 补充了更精确的类型细节。Attributes 属性名称说明类型默认值header卡片标题也接受通过slot#header传入的 DOM^[string]—footer ^(2.4.3)卡片底部内容也接受通过slot#footer传入的 DOM^[string]—body-style卡片正文的 CSS 样式^[object]CSSProperties—header-class ^(2.9.8)卡片头部自定义类名^[string]—body-class ^(2.3.10)卡片正文自定义类名^[string]—footer-class ^(2.9.8)卡片底部自定义类名^[string]—shadow卡片阴影显示时机^[enum]always \| never \| hoveralways补充说明header与footer属性在 card.ts 中默认值为空字符串仅作纯文本兜底富内容请优先使用具名插槽。三个*-class属性的类型为ClassValue实际声明为[String, Array, Object, Boolean]因此支持字符串、数组多类名、对象条件类名三种写法。上述 class 属性在 card.vue 中分别拼接在.el-card__header、.el-card__body、.el-card__footer上单元测试 已验证三个类名均正确挂载。Slots 插槽名称说明default自定义默认内容header卡片头部内容footer卡片底部内容样式定制要点卡片样式基于 CSS 变量驱动位于 packages/theme-chalk/src/card.scss。可通过覆盖变量实现主题定制card-paddingheader/body/footer 的内边距基准值header 与 footer 实际为padding - 2pxcard-border-radius卡片圆角card-border-color边框与分隔线颜色card-bg-color卡片背景色。布局上卡片根节点为flex-direction: column的纵向弹性布局body 设置了flex-grow: 1与overflow: auto因此在弹性父容器中能自动撑满剩余高度并独立滚动适合构建可滚动内容区。结合上述 CSS 变量即可无侵入地完成卡片圆角、间距与阴影深浅的品牌化定制。实战小结通过本文可以掌握 Element Plus Card 组件从最小可用到富内容卡片的完整路径基础三段式布局#header 默认插槽 #footer精简形态省略 header/footer 得到纯内容容器富媒体扩展用body-style字符串/对象/数组三种写法定制正文样式交互反馈用shadow三态always/hover/never控制阴影时机并结合 ConfigProvider 实现全局默认阴影策略精细定制通过header-class、body-class、footer-class挂载自定义类配合 SCSS 变量统一主题。相关源码与示例可进一步查阅组件模板与逻辑、Props 定义、单元测试、样式源码 以及 完整示例目录。【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考