elementui card
ElementUI Card 组件使用指南
ElementUI 的 Card 组件是一个灵活的容器，用于展示内容块，支持标题、操作区域和自定义内容。
基本用法
通过 el-card 标签创建基础卡片，内容直接放在标签内部：
<el-card>
<div>卡片内容</div>
</el-card>带标题的卡片
使用 header 插槽或 header 属性添加标题：
<el-card header="默认标题">
<div>内容区域</div>
</el-card>
<!-- 或使用插槽 -->
<el-card>
<template #header>
<div class="custom-header">自定义标题样式</div>
</template>
<div>内容区域</div>
</el-card>阴影效果
通过 shadow 属性控制阴影显示：
always：始终显示hover：悬停时显示never：从不显示<el-card shadow="hover"> <div>悬停时显示阴影</div> </el-card>
卡片操作区
在 header 插槽中添加操作按钮：
<el-card>
<template #header>
<div class="clearfix">
<span>卡片标题</span>
<el-button style="float: right">操作按钮</el-button>
</div>
</template>
<div>内容区域</div>
</el-card>自定义样式
通过 CSS 覆盖默认样式：
.custom-card {
border-radius: 8px;
}
.custom-card .el-card__header {
background-color: #f5f7fa;
}高级用法
结合其他组件创建复杂布局：
<el-card>
<el-tabs v-model="activeTab">
<el-tab-pane label="Tab1" name="first">内容1</el-tab-pane>
<el-tab-pane label="Tab2" name="second">内容2</el-tab-pane>
</el-tabs>
</el-card>属性说明
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| header | 标题文本 | string | — | — |
| shadow | 阴影显示方式 | string | always/hover/never | always |
| body-style | 内容区域样式 | object | — | { padding: '20px' } |
注意事项
- 卡片宽度默认继承父容器，可通过 CSS 设置固定宽度
- 内容区域默认有 20px 内边距，可通过
body-style调整 - 在移动端使用时建议减少内边距以节省空间
