el-card详解

el-card 是 Element Plus 框架中的一个卡片组件，用于展示内容区域。它可以包含标题、内容和操作等部分，适用于多种场景。

一。 el-card 属性详解

1. body-style:

   • 类型: Object
   • 用途: 卡片主体的内容区的样式。
   • 默认值: { padding: '20px' }

2. shadow:

   • 类型: String
   • 用途: 卡片阴影的显示时机，可选值为 always、hover、never。
   • 默认值: always

二。 el-card 插槽详解

1. header:

   • 插槽名称: header
   • 用途: 自定义卡片头部的内容。

2. default:

   • 插槽名称: default
   • 用途: 自定义卡片主体的内容。

三。el-card 事件详解

1. click:

   • 类型: Function
   • 用途: 卡片被点击时触发的回调函数。
   • 参数: event（点击事件）

四。实例

<template>
  <div>
    <h2>Card 示例</h2>

    <!-- 基本用法 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>卡片标题</span>
        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
      </div>
      <div>
        <p>这里是卡片的内容区域。</p>
        <p>可以包含文本、图片或其他组件。</p>
      </div>
    </el-card>

    <!-- 简单用法 -->
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>卡片标题</span>
      </div>
      <div>
        <p>这是一个简单的卡片。</p>
      </div>
    </el-card>

    <!-- 自定义样式 -->
    <el-card class="custom-card" :body-style="{ padding: '10px' }">
      <div slot="header" class="clearfix">
        <span>自定义样式卡片</span>
      </div>
      <div>
        <p>这个卡片的主体部分有自定义的内边距。</p>
      </div>
    </el-card>

    <!-- 无阴影 -->
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>无阴影卡片</span>
      </div>
      <div>
        <p>这个卡片没有阴影效果。</p>
      </div>
    </el-card>

    <!-- 图片卡片 -->
    <el-card class="box-card image-card">
      <img src="https://via.placeholder.com/150" alt="示例图片" class="image">
      <div slot="header" class="clearfix">
        <span>图片卡片</span>
      </div>
      <div>
        <p>这个卡片包含一张图片。</p>
      </div>
    </el-card>

    <!-- 卡片列表 -->
    <div class="card-list">
      <el-card class="box-card" v-for="item in cardList" :key="item.id" :body-style="{ padding: '10px' }">
        <div slot="header" class="clearfix">
          <span>{{ item.title }}</span>
        </div>
        <div>
          <p>{{ item.content }}</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

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

const cardList = ref([
  { id: 1, title: '卡片1', content: '这是卡片1的内容。' },
  { id: 2, title: '卡片2', content: '这是卡片2的内容。' },
  { id: 3, title: '卡片3', content: '这是卡片3的内容。' }
])
</script>