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	卡片主体内容

卡片组件适合用于展示独立的内容区块，通过合理组合标题、内容和操作按钮可以构建丰富的信息展示界面。