el‐card - daniel-qa/Vue GitHub Wiki
el-card 是 Element Plus 框架中的一個基礎組件，它提供了一個簡潔美觀的容器，可以用來包裹內容，並支持多種樣式和功能。
<el-card :body-style="{ padding: '0px' }"></el-card>
:body-style 的寫法只會影響當前的 el-card 組件，不會影響其他的元件。這是因為 body-style 是 Element Plus 中 el-card 組件的一個屬性，
| 設置方式 | 說明 | 適用場景 |
|---|---|---|
| 全域設置 | 在 :root 中設置 --el-card-padding，影響所有 el-card。 |
當你希望所有卡片使用統一的內邊距風格。 |
| 單獨設置 | 在每個 el-card 元件中設置 --el-card-padding，僅影響當前卡片。 |
當你希望不同卡片有不同的內邊距設定。 |
/* 在全局樣式文件或 <style> 中設置 */
:root {
--el-card-padding: 0px; /* 設定所有 el-card 內容區域的內邊距為 0 */
}
<template>
<!-- 單獨設置這一張卡片的內邊距為 0px -->
<el-card style="--el-card-padding: 0px;">
<div>這是內邊距為 0px 的卡片</div>
</el-card>
<!-- 單獨設置這一張卡片的內邊距為 20px -->
<el-card style="--el-card-padding: 20px;">
<div>這是內邊距為 20px 的卡片</div>
</el-card>
</template>
<template>
<el-card
header="標題文字"
shadow="always">
<div>這是卡片的主要內容</div>
</el-card>
</template>
shadow="always" 讓卡片始終顯示陰影。
卡片內的內容是通過插槽直接放置。
可以使用插槽來進一步自定義卡片的內容和標題：
<template>
<el-card shadow="hover">
<template #header>
<div style="font-weight: bold;">自定義標題區域</div>
</template>
<div>這是卡片的主要內容，可以放圖片、文字等。</div>
</el-card>
</template>
使用 #header 插槽完全自定義標題內容。
當鼠標懸停在卡片上時才會顯示陰影。
- 設定高寬
<el-card
header="標題文字"
style="width: 300px; height: 200px;">
- el-card 的 header 區域有一個默認的 CSS 類名 .el-card__header，可以通過自定義樣式進行覆蓋：
.header-container {
height: 162px; /* 固定 header 的高度 */
}
- EX
<el-row gutter="20">
<el-col>
<el-card>區塊 1</el-card>
</el-col>
<el-col>
<el-card>區塊 2</el-card>
</el-col>
<el-col>
<el-card>區塊 3</el-card>
</el-col>
</el-row>
如果你想為 el-card 加上自定義的樣式，class="box-card" 就會派上用場。例如：
/* 自定義 .box-card 樣式 */
.box-card {
border: 1px solid #ddd;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: 10px;
border-radius: 8px;
}
box-card 是一個常見的自定義類別，用來為 el-card 添加自定義樣式。即使不使用 box-card 類別，el-card 本身也會有預設的樣式，例如：邊框、陰影效果, 頭部區域（如果使用了 slot="header"）, 內容區域的排版等。
gutter="20" 是 Element Plus 中 el-row 元件的一個屬性，用於設定列元素之間的間距。
EX2
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>區塊 1</span>
</div>
<div>內容區域 1</div>
</el-card>
在 Element UI（或 Element Plus）中，< div slot="header" class="clearfix"> 是一個常見的用法，通常出現在使用 el-card 組件時。這段程式碼是用來設置卡片（el-card）的標題區域（header）的內容和樣式。
EX3
<!-- 第二张子卡片，标题为 接收名單 -->
<el-card class="card">
<template #header>
<span class="head-text">接收名單</span>
</template>
<!-- 其他内容 -->
<div class="card-content">
內容區域
</div>
</el-card>
/* CSS */
.outer-head-text {
font-size: 23px; /* 外层卡片标题字体 */
font-weight: bold;
text-align: center;
color: #333;
}
-
template #header 是 Element Plus（或較新版本的 Element UI）中的插槽寫法。這裡使用了 #header 插槽來插入標題，這種寫法更加現代化和靈活，支持多個插槽和更複雜的內容。
-
slot="header" 用來定義卡片的標題區域。這是 Element UI 的原生方式。
/* 自定義 .box-card 樣式 */
.box-card {
border: 1px solid #ddd;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: 10px;
border-radius: 8px;
display: flex; /* 使用 Flexbox 布局 */
flex-direction: column; /* 子元素按列方向（纵向）排列 */
}