详细分析el-card中的基本知识（附Demo）

前言

原先使用Avue的框架写过一版，但格式不同，可推荐阅读：【前端】Vue实现网站导航 以卡片形式显示（附Demo）

后续实战Vue3框架的基础上，整合一版类似如下的：

基本的Demo如下：

<template>
  <el-card class="mt-20">
    <div class="text-18px font-bold mb-10">系统模块功能</div>
    <el-row :gutter="20">
      <el-col :span="8" v-for="module in modules" :key="module.link" class="module-col">
        <el-card class="module-card">
          <div class="text-16px">{
   
   { module.name }}</div>
          <div class="text-gray-500">{
   
   { module.description }}</div>
          <el-button type="primary" @click="navigateToModule(module.link)">进入模块</el-button>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import {
      
       ref } from 'vue';

const modules = ref([
  {
      
       name: '一船一档', description: 'v', link: '/module1' },
  {
      
       name: '模块2', description: '功能描述2', link: '/module1' },
  {
      
       name: '模块3', description: '功能描述3', link: '/module1' },
  {
      
       name: '模块1', description: '功能描述1', link: '/module1' },
  {
      
       name: '模块2', description: '功能描述2', link: '/module2' },
  {
      
       name: '模块1', description: '功能描述1', link: '/module1' },
  {
      
       name: '模块2', description: '功能描述2', link: '/module2' },
]);

const navigateToModule = (link) => {
      
      
  // 模拟导航功能，实际应使用 Vue Router
  console.log(`Navigating to: ${ 
        link}`);
};
</script>

<style scoped>
.module-col {
      
      
  justify-content: center; /* Center the columns */
  margin-bottom: 20px; /* Add space between rows */
}
.module-card {
      
      
  display: flex; /* Use flex layout */
  flex-direction: column; /* Stack children vertically */
  justify-content: space-between; /* Evenly space children */
  transition: transform 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px; /* Add padding for better appearance */
  border-radius: 8px; /* Rounded corners */
  background-color: #f9f9f9; /* Light background color */
  height: 100%; /* Ensure card takes full height */
}

.module-card:hover {
      
      
  transform: translateY(-5px); /* Slight lift effect on hover */
}
</style>

1. 基本知识

el-card 是 Element Plus 组件库中的一个重要组件，用于展示内容块，通常用于显示信息、图片、操作按钮等

具有良好的可定制性和灵活性，适合多种使用场景

基本属性如下：

• shadow：控制卡片的阴影效果，可以设置为 always, hover, never
• body-style：用于设置卡片主体的 CSS 样式，支持传入对象或字符串
• header：设置卡片的头部内容，可以是字符串或插槽

基本的用例如下：

<template>
  <el-card class="card" :shadow="'hover'">
    <div slot="header" class="header">
      <span>卡片标题</span>
    </div>
    <div class="content">
      这是一个简单的卡片内容。
    </div>
  </el-card>
</template>

<style scoped>
.card {
      
      
  width: 300px;
  margin: 20px;
}
.header {
      
      
  font-weight: bold;
}
.content {
      
      
  padding: 20px;
}
</style>

2. Demo

不同场景下的Demo

示例 1: 卡片列表

<template>
  <el-row :gutter="20">
    <el-col :span="8" v-for="item in items" :key="item.id">
      <el-card :body-style="{ padding: '20px' }">
        <div class="card-header">{
   
   { item.title }}</div>
        <div class="card-content">{
   
   { item.description }}</div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
const items = [
  {
      
       id: 1, title: '卡片1', description: '这是卡片1的描述' },
  {
      
       id: 2, title: '卡片2', description: '这是卡片2的描述' },
  {
      
       id: 3, title: '卡片3', description: '这是卡片3的描述' },
];
</script>

<style scoped>
.card-header {
      
      
  font-weight: bold;
  font-size: 16px;
}
.card-content {
      
      
  margin-top: 10px;
}
</style>

示例 2: 卡片带图片

<template>
  <el-card class="image-card">
    <img src="https://via.placeholder.com/300" class="image" />
    <div class="content">
      <div class="title">带图片的卡片</div>
      <div>这是卡片的内容，展示了一个图片。</div>
    </div>
  </el-card>
</template>

<style scoped>
.image-card {
      
      
  width: 320px;
  margin: 20px;
}
.image {
      
      
  width: 100%;
  height: auto;
  border-radius: 5px;
}
.content {
      
      
  padding: 15px;
}
.title {
      
      
  font-weight: bold;
}
</style>

示例 3: 卡片悬浮效果

<template>
  <el-card class="hover-card" @mouseover="hover = true" @mouseleave="hover = false">
    <div :style="{ opacity: hover ? 0.7 : 1 }">
      <div class="header">悬浮效果卡片</div>
      <div>悬浮时内容透明度变化。</div>
    </div>
  </el-card>
</template>

<script setup>
import {
      
       ref } from 'vue';

const hover = ref(false);
</script>

<style scoped>
.hover-card {
      
      
  width: 300px;
  margin: 20px;
  transition: transform 0.3s;
}
.hover-card:hover {
      
      
  transform: translateY(-5px); /* 悬浮时上移 */
}
.header {
      
      
  font-weight: bold;
}
</style>

示例 4: 卡片与操作按钮

<template>
  <el-card class="button-card">
    <div class="header">操作卡片</div>
    <div>点击下方按钮执行操作。</div>
    <el-button type="primary" @click="handleClick">点击我</el-button>
  </el-card>
</template>

<script setup>
const handleClick = () => {
      
      
  alert('按钮被点击！');
};
</script>

<style scoped>
.button-card {
      
      
  width: 300px;
  margin: 20px;
}
.header {
      
      
  font-weight: bold;
}
</style>