elementui卡片
ElementUI 卡片组件使用指南
ElementUI 提供了 el-card 组件用于展示内容区块，支持标题、操作区域、阴影效果等配置。
基础用法
通过 header 属性设置卡片标题，默认插槽放置卡片内容。
<el-card header="默认卡片">
<div>这里是卡片内容</div>
</el-card>带阴影效果
shadow 属性控制阴影显示：
always：始终显示hover：悬停时显示never：不显示
<el-card shadow="hover">
<template #header>
<div class="clearfix">
<span>悬停阴影卡片</span>
</div>
</template>
<div>鼠标悬停时显示阴影</div>
</el-card>自定义标题栏
使用具名插槽 header 可以自定义标题区域，通常配合 clearfix 类实现布局。
<el-card>
<template #header>
<div class="clearfix">
<span style="float: left">自定义标题</span>
<el-button style="float: right" size="small">操作按钮</el-button>
</div>
</template>
<div>自定义标题区域内容</div>
</el-card>卡片尺寸控制
通过 style 或 CSS 类控制卡片尺寸：
<el-card style="width: 480px">
<div>固定宽度卡片</div>
</el-card>内容分栏布局
卡片内部可使用 ElementUI 的 el-row 和 el-col 实现栅格布局：
<el-card>
<el-row :gutter="20">
<el-col :span="8">左侧内容</el-col>
<el-col :span="16">右侧内容</el-col>
</el-row>
</el-card>带图片的卡片
结合 el-image 组件实现图文卡片：
<el-card>
<el-image :src="imageUrl" fit="cover"></el-image>
<div style="padding: 14px">
<span>图片描述文字</span>
</div>
</el-card>属性说明
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| header | 标题文本 | string | — | — |
| shadow | 阴影显示时机 | string | always/hover/never | always |
| body-style | 内容区域样式 | object | — | { padding: '20px' } |
插槽说明
| 名称 | 说明 |
|---|---|
| header | 标题区域内容 |
| default | 卡片主体内容 |
卡片组件适合用于展示独立的内容区块，通过合理组合标题、内容和操作按钮可以构建丰富的信息展示界面。
