Element-UI
其他组件

卡片组件 (Card)

# 卡片组件 (Card)

Element-UI 的 Card 组件用于将信息聚合在卡片容器中展示，通常用于区分和展示不同类别的信息内容，卡片的样式和内容区域可以自定义。

提示

Card 组件官方文档：https://element.eleme.cn/#/zh-CN/component/card (opens new window)

# 1. 基本用法

基本语法：使用 <el-card> 标签创建一个卡片容器，可以通过 header 属性设置卡片的标题，也可以通过 slot#header 插槽传入自定义的标题内容。

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"> <!-- 具名插槽 -->
      <span>卡片标题</span>
      <el-button style="float: right;" type="primary" size="mini">操作按钮</el-button>
    </div>
    <div>卡片内容</div> <!-- 默认插槽 -->
  </el-card>
</template>

<script>
export default {
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

标题设置：通过 slot="header" 属性设置卡片的标题，或使用 t#header 插槽传入自定义标题内容。
内容区域：可以在卡片主体中添加任意内容，包括文本、图片、列表等。

# Card 属性

参数	说明	类型	可选值	默认值
header	设置卡片的标题，也可以通过 `slot#header` 传入 DOM	String	—	—
body-style	设置卡片内容区域的样式	Object	—	`{ padding: '20px' }`
shadow	设置卡片阴影的显示时机	String	always / hover / never	always

# Card 插槽

插槽名称	说明
—	卡片的内容
header	卡片标题区域的内容，优先于 `header` 属性

# Card 事件

Card 组件本身没有定义特定的事件。

# Card 方法

Card 组件没有提供特定的方法。

# 2. 常用示例

# 1. 基本卡片

展示一个简单的卡片，包括标题和内容区域。

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>卡片标题</span>
    </div>
    <div>卡片内容</div>
  </el-card>
</template>

1
2
3
4
5
6
7
8

基础用法：通过 slot="header" 属性或 #header 设置卡片标题，内容区域可以包括文本或其他元素。

# 2. 自定义样式的卡片

通过 body-style 属性设置卡片内容区域的自定义样式。

<template>
  <el-card class="box-card" style="width: 400px;" :body-style="{ padding: '10px', background: '#f9f9' }">
    <div slot="header" class="clearfix">
      <span>自定义样式卡片</span>
    </div>
    <div>自定义样式的内容区域</div>
    <div>自定义样式的内容区域</div>
    <div>自定义样式的内容区域</div>
    <div>自定义样式的内容区域</div>
    <div>自定义样式的内容区域</div>
    <div>自定义样式的内容区域</div>
    <div>自定义样式的内容区域</div>
  </el-card>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

自定义样式：通过 body-style 属性设置卡片内容区域的内边距、背景色等样式，使其更符合需求。

# 3. 带操作按钮的卡片

在卡片的标题区域添加操作按钮。

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>带操作按钮的卡片</span>
      <el-button style="float: right;" type="primary" size="mini">操作</el-button>
    </div>
    <div>卡片内容</div>
  </el-card>
</template>

1
2
3
4
5
6
7
8
9

操作按钮：可以在 slot#header 插槽中添加操作按钮，使卡片更加灵活和实用。

# 4. 带阴影的卡片

通过 shadow 属性控制卡片的阴影效果。

<template>
  <el-card
    class="box-card"
    shadow="hover">
    <div slot="header" class="clearfix">
      <span>带阴影效果的卡片</span>
    </div>
    <div>鼠标悬停时显示阴影</div>
  </el-card>
</template>

1
2
3
4
5
6
7
8
9
10

阴影效果：通过 shadow 属性控制阴影显示时机，可以设置为 always（始终显示）、hover（悬停时显示）或 never（从不显示）。

# 5. 多个卡片组合

在页面中展示多个卡片，使用卡片来布局和展示信息。

<template>
  <div class="card-container">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>卡片 1</span>
      </div>
      <div>卡片 1 的内容</div>
    </el-card>
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>卡片 2</span>
      </div>
      <div>卡片 2 的内容</div>
    </el-card>
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>卡片 3</span>
      </div>
      <div>卡片 3 的内容</div>
    </el-card>
  </div>
</template>

<style scoped>
.card-container {
  display: flex;
  gap: 20px;
}
.box-card {
  width: 300px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

组合使用：多个卡片可以组合使用，用于展示不同类别的信息或实现不同的功能布局。

# 3. 如何创建响应式网格布局

# 1. 明确需求

首先，我们需要明确要实现的布局效果和需求。我们的目标是创建一个包含多个卡片的网格布局，每个卡片展示内容和图片，且在鼠标悬浮到图片时具有放大效果。

# 2. 选择合适的组件

为了实现这一需求，Element-UI 提供了以下组件：

el-card 组件: 用于创建卡片容器，展示内容。
el-row 组件: 用于创建响应式网格布局的行。
el-col 组件: 用于定义网格布局中的列，控制每行中卡片的个数。

# 3. 创建基础结构

在 Vue 组件的模板部分，使用 el-row 作为容器，内部放置多个 el-col 组件，每个 el-col 组件中包含一个 el-card。这为每个卡片提供一个独立的列，从而实现网格布局。

<template>
  <el-row :gutter="20">
    <el-col :span="8" v-for="item in cardData" :key="item.id">
      <el-card shadow="hover">
        <!-- 卡片内容 -->
      </el-card>
    </el-col>
  </el-row>
</template>

1
2
3
4
5
6
7
8
9

el-row: gutter 属性用来设置列之间的间距，值为像素。
el-col: span 属性用来设置每列的宽度（取值范围为 1-24），比如 span="8" 意味着每行显示 3 列卡片。

# 4. 填充卡片内容

在 el-card 内部添加实际要展示的内容，如图片、标题、文本等。可以使用 img 标签来显示图片，div 标签来容纳其他文本内容。

<template>
  <el-row :gutter="20">
    <el-col :span="8" v-for="item in cardData" :key="item.id">
      <el-card shadow="hover">
        <div class="image-container">
          <img :src="item.image" class="image" alt="">
        </div>
        <div style="padding: 14px;">
          <span>{{ item.title }}</span>
          <div class="bottom clearfix">
            <time class="time">{{ item.time }}</time>
            <el-button type="text" class="button">操作按钮</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

image-container: 用于包裹图片，确保图片在卡片内部进行调整。
img: 显示图片，并通过 object-fit 属性调整其尺寸。

# 5. 添加图片悬浮放大效果

使用 CSS 样式来实现图片悬浮放大效果。通过 transform 和 transition 属性，使图片在鼠标悬浮时放大并具有平滑过渡效果。

<style scoped>
.el-card {
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
}

.image-container {
  overflow: hidden; /* 确保图片放大时不会超出卡片边界 */
}

.image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.3s ease; /* 设置平滑的过渡效果 */
}

.image-container:hover .image {
  transform: scale(1.1); /* 鼠标悬浮时放大图片 */
}

.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time {
  color: #999;
  font-size: 14px;
}

.button {
  padding: 0;
  float: right;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

transform: scale(1.1): 在 hover 状态下放大图片。
transition: transform 0.3s ease: 平滑地进行放大效果过渡。

# 6. 实现响应式布局

使用 el-col 的 span 属性控制每行展示的卡片数量。span 的值根据网格布局的比例调整，比如：

span="8"：每行显示 3 个卡片（24 / 8 = 3）。
span="6"：每行显示 4 个卡片（24 / 6 = 4）。

可以结合 el-row 和 el-col 来设计适应不同屏幕宽度的布局，使用 xs、sm、md、lg 和 xl 来定义不同屏幕尺寸下的响应式行为。

注意事项

当你使用了 xs、sm、md、lg 和 xl 这些属性时，布局会根据屏幕宽度自动调整，并按照你在这些属性中定义的值来控制每行显示的卡片数量。在这种情况下，单独设置的 span 属性不会生效，因为 span 只是在没有使用这些响应式属性时才会生效。

响应式布局：在小屏幕下（如手机），每行显示 1 个卡片（xs="24"）；在中等屏幕下，每行显示 2 个卡片（sm="12"）；在大屏幕下（如桌面），每行显示 3 个或更多卡片。

<template>
  <el-row :gutter="20">
    <el-col 
      v-for="item in cardData" 
      :key="item.id"
      :xs="24" 
      :sm="12" 
      :md="8"
      :lg="6"
      :xl="4">
      <el-card shadow="hover">
        <!-- 卡片内容 -->
      </el-card>
    </el-col>
  </el-row>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 7. 动态生成数据

使用 v-for 指令来动态渲染多个 el-col，通过遍历数据数组 cardData，为每个卡片生成内容。确保每个卡片有唯一的 key。

<script>
export default {
  data() {
    return {
      cardData: [
        { id: 1, title: '标题1', time: '2024-07-29 17:07:34', image: 'path_to_image_1' },
        { id: 2, title: '标题2', time: '2024-07-22 12:59:13', image: 'path_to_image_2' },
        // 更多卡片数据
      ]
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

动态内容：将卡片内容存储在 cardData 数组中，通过遍历数组生成对应的卡片。

# 8. 带卡片布局完整示例

通过以上步骤，使用 el-card 结合 el-row 和 el-col 创建了一个响应式网格布局。后面还可以进一步扩展此布局，例如添加分页、过滤或排序功能，以适应不同的项目需求。

<template>
  <el-row :gutter="20">
    <el-col :span="8" v-for="item in cardData" :key="item.id">
      <el-card shadow="hover">
        <div class="image-container">
          <img :src="item.image" class="image" alt="">
        </div>
        <div style="padding: 14px;">
          <span>{{ item.title }}</span>
          <div class="bottom clearfix">
            <time class="time">{{ item.time }}</time>
            <el-button type="text" class="button">操作按钮</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      cardData: [
        {
          id: 1,
          title: '热爱生活也是一种享受',
          time: '2024-07-29 17:07:34',
          image: 'https://web-183.oss-cn-beijing.aliyuncs.com/typora/202408111613760.jpg'
        },
        {
          id: 2,
          title: '无人了解你的灵魂，所以尽量活的自由一点',
          time: '2024-07-22 12:59:13',
          image: 'https://web-183.oss-cn-beijing.aliyuncs.com/typora/202408111613833.jpg'
        },
        {
          id: 3,
          title: '这个夏天你有空吗，我们一起吃冰淇淋呀',
          time: '2024-07-22 12:59:13',
          image: 'https://web-183.oss-cn-beijing.aliyuncs.com/typora/202408111615400.webp'
        },
      ]
    };
  }
};
</script>

<style scoped>
.el-card {
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
}

.image-container {
  overflow: hidden;
  /* 确保图片放大时不会超出卡片边界 */
}

.image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.3s ease;
  /* 设置平滑的过渡效果 */
}

.image-container:hover .image {
  transform: scale(1.1);
  /* 鼠标悬浮时放大图片 */
}

.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time {
  color: #999;
  font-size: 14px;
}

.button {
  padding: 0;
  float: right;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

编辑此页

上次更新: 2024/12/28, 18:32:08

← 气泡确认框组件 (Popconfirm) 走马灯组件 (Carousel)→