Element Plus常見基礎組件（一）

基礎組件

Button 按鈕

一、基礎用法

<el-button>默認按鈕</el-button>
<el-button type="primary">主要按鈕</el-button>

二、按鈕類型 (type)

類型說明示例代碼
default默認按鈕<el-button>默認</el-button>
primary主要按鈕（藍色）<el-button type="primary">
success成功按鈕（綠色）<el-button type="success">
warning警告按鈕（黃色）<el-button type="warning">
danger危險按鈕（紅色）<el-button type="danger">
info信息按鈕（灰色）<el-button type="info">
text文字按鈕<el-button type="text">

三、核心屬性詳解

  1. size - 按鈕尺寸

    <el-button size="large">大型</el-button>
<el-button size="default">默認</el-button>
<el-button size="small">小型</el-button>

  2. icon - 圖標按鈕

    <el-button icon="el-icon-search">搜索</el-button>
<el-button icon="el-icon-edit" circle /> <!-- 圓形圖標按鈕 -->

  3. disabled - 禁用狀態

    <el-button disabled>不可點擊</el-button>

  4. loading - 加載狀態

    <el-button :loading="true">加載中</el-button>

  5. round - 圓角按鈕

    <el-button round>圓角按鈕</el-button>

  6. plain - 樸素樣式（無背景色）

    <el-button plain>樸素按鈕</el-button>

  7. link - 鏈接樣式

    <el-button type="primary" link>鏈接按鈕</el-button>

  8. circle - 圓形按鈕

    <el-button icon="el-icon-plus" circle />

  9. autofocus - 自動聚焦

    <el-button autofocus>自動聚焦</el-button>

  10. native-type - 原生按鈕類型

    <el-button native-type="submit">提交表單</el-button>
<!-- 可選值: button / submit / reset -->

  11. color-自定義按鈕顏色

    <le-button type="primary" color="#123456">自定義顏色</el-button>

四、特殊按鈕

  1. 文字按鈕組

    <el-button type="text">首頁</el-button>
<el-button type="text" disabled>禁用文字按鈕</el-button>

  2. 圖標+文字組合

    <el-button>下載 <el-icon><Download /></el-icon>
</el-button>

  3. 按鈕組 (el-button-group)

    <el-button-group><el-button icon="el-icon-arrow-left">上一頁</el-button><el-button>下一頁 <i class="el-icon-arrow-right"></i></el-button>
</el-button-group>

五、完整屬性表

屬性說明類型可選值默認值
type按鈕類型stringprimary/success/warning/danger/info/textdefault
size尺寸stringlarge/default/smalldefault
icon圖標組件Component / string-—
native-type原生 type 屬性stringbutton / submit / resetbutton
loading加載狀態boolean—false
disabled禁用狀態boolean—false
plain樸素樣式boolean—false
round圓角按鈕boolean—false
circle圓形按鈕boolean—false
link鏈接按鈕boolean—false
autofocus自動聚焦boolean—false
loading-icon自定義加載圖標Component / string-Loading

提示：所有圖標需先導入 @element-plus/icons-vue，可通過 Element Plus 圖標文檔 查詢可用圖標

Border 邊框

一、基礎使用

在元素上直接添加以下類名即可生效，無需額外導入 CSS

類名作用
el-border添加全方向1px邊框
el-border-top僅添加上邊框
el-border-left僅添加左邊框
el-border-bottom僅添加下邊框
el-border-right僅添加右邊框
el-border-0移除全部邊框

示例代碼：

<div class="el-border">全邊框容器</div>
<div class="el-border-top">上邊框標題</div>

二、邊框粗細控制

通過組合類名精確控制邊框粗細：

類名作用
el-border-base默認1px邊框（同.el-border）
el-border-thin0.5px超細邊框
el-border-thick2px粗邊框

使用示例：

<div class="el-border el-border-thick">粗邊框容器</div>
<div class="el-border-top el-border-base">標準上邊框</div>

三、邊框樣式定制

支持多種邊框樣式，與其他屬性組合使用：

類名作用
el-border-solid實線（默認）
el-border-dashed虛線
el-border-dotted點狀線
el-border-double雙實線

高級組合示例：

<div class="el-border el-border-dashed el-border-thick">粗虛線邊框</div>
<div class="el-border-bottom el-border-dotted">點狀下劃線</div>

四、邊框顏色控制

使用語義化顏色類名（需激活主題色）：

類名顏色說明
el-border-primary主題主色（默認藍）
el-border-success成功綠色
el-border-warning警告黃色
el-border-danger危險紅色
el-border-info信息灰色

帶顏色的邊框示例：

<div class="el-border el-border-success">成功提示框</div>
<div class="el-border-top el-border-warning">警告上邊框</div>

💡 提示：在 app.vue 中設置主題色：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'const app = createApp(App)
app.use(ElementPlus, { color: '#ff4500' // 自定義主題色
})

五、圓角控制

完整圓角控制解決方案：

類名作用
el-border-radius-base默認圓角（4px）
el-border-radius-small小圓角（2px）
el-border-radius-round大圓角（20px）
el-border-radius-circle圓形（50%）

圓角組合示例：

<div class="el-border el-border-radius-base">標準圓角卡片</div>
<button class="el-border el-border-radius-circle">圓形按鈕</div>

Container 布局容器

一、容器組件架構

<el-container>           <!-- 根容器：管理整體布局流 --><el-header></el-header>   <!-- 頂欄：頁面頭部 --><el-aside></el-aside>     <!-- 側欄：導航菜單區 --><el-main></el-main>       <!-- 主區：核心內容容器 --><el-footer></el-footer>   <!-- 底欄：頁面底部信息 -->
</el-container>

組件特性：自動實現 Flex 彈性布局，無需手動編寫 flex 屬性

二、核心組件 API 詳解

1. <el-container> 根容器
參數類型默認值說明
directionvertical/horizontalhorizontal子元素的排列方向
事件說明
@scroll容器滾動時觸發
2. <el-header> 頂欄
參數類型默認值說明
heightstring/number60px設置高度（支持任何 CSS 單位）
插槽說明
default自定義頭部內容
3. <el-aside> 側邊欄
參數類型默認值說明
widthstring/number300px設置寬度
collapsebooleanfalse折疊狀態
事件說明
@collapse-change折疊狀態變化時觸發
4. <el-main> 主內容區
特性說明
自動特性自動填充剩余空間并生成垂直滾動條
插槽default 區域用于放置頁面核心內容
5. <el-footer> 底欄
參數類型默認值
heightstring/number60px

三、三種經典布局方案

方案1：上下布局（管理后臺常用）
<el-container direction="vertical"><el-header>系統標題</el-header><el-container><el-aside width="200px">菜單導航</el-aside><el-main>數據看板</el-main></el-container>
</el-container>
方案2：左右布局（文檔類頁面）
<el-container><el-aside width="240px">文檔目錄</el-aside><el-container direction="vertical"><el-header>當前章節標題</el-header><el-main>文檔內容</el-main><el-footer>版權信息</el-footer></el-container>
</el-container>
方案3：頂部主導航+二級側欄
<el-container direction="vertical"><el-header>主導航欄</el-header><el-container><el-aside width="180px">二級導航</el-aside><el-container direction="vertical"><el-main>主體內容</el-main><el-footer>操作指引</el-footer></el-container></el-container>
</el-container>

四、高級開發技巧

1. 動態側邊欄（帶折疊動畫）
<script setup>
import { ref } from 'vue'
const isCollapsed = ref(false)
</script><template><el-aside :width="isCollapsed ? '64px' : '240px'"@collapse-change="isCollapsed = $event"><el-button @click="isCollapsed = !isCollapsed">{{ isCollapsed ? '展開' : '折疊' }}</el-button><transition name="el-fade-in-linear"><div v-show="!isCollapsed">導航內容</div></transition></el-aside>
</template>
2. 懸浮頂欄（滾動時固定）
/* 全局樣式 */
.el-header {position: sticky;top: 0;z-index: 1000;box-shadow: 0 2px 12px rgba(0,0,0,0.1);transition: all 0.3s;
}
3. 響應式適配（移動端優化）
<el-aside :width="windowWidth > 768 ? '220px' : '0'"><div v-if="windowWidth > 768">桌面端菜單</div>
</el-aside>
// 監聽窗口變化
import { onMounted, onUnmounted, ref } from 'vue'const windowWidth = ref(window.innerWidth)
const handleResize = () => windowWidth.value = window.innerWidthonMounted(() => window.addEventListener('resize', handleResize))
onUnmounted(() => window.removeEventListener('resize', handleResize))

Layout 布局

一、基礎布局示例

<template><div class="layout-demo"><el-row><el-col :span="24"><div class="grid-content header">24 分欄 - 頭部</div></el-col></el-row><el-row><el-col :span="6"><div class="grid-content sidebar">6 分欄 - 側邊欄</div></el-col><el-col :span="18"><div class="grid-content main">18 分欄 - 內容區</div></el-col></el-row><el-row><el-col :span="8"><div class="grid-content card">8 分欄 - 卡片1</div></el-col><el-col :span="8"><div class="grid-content card">8 分欄 - 卡片2</div></el-col><el-col :span="8"><div class="grid-content card">8 分欄 - 卡片3</div></el-col></el-row><el-row><el-col :span="6"><div class="grid-content footer">6 分欄</div></el-col><el-col :span="6" :offset="6"><div class="grid-content footer">偏移6列</div></el-col><el-col :span="6"><div class="grid-content footer">6 分欄</div></el-col></el-row></div>
</template><style scoped>
.layout-demo {max-width: 1200px;margin: 20px auto;
}.header, .footer {background-color: #3498db;color: white;
}.sidebar {background-color: #2ecc71;color: white;
}.main {background-color: #f1c40f;
}.card {background-color: #e74c3c;color: white;
}.grid-content {border-radius: 4px;min-height: 36px;display: flex;align-items: center;justify-content: center;font-weight: bold;padding: 20px 0;margin-bottom: 10px;
}
</style>

二、核心概念

1. 柵格系統
  • 總寬度分為 24 欄
  • <el-row> 代表行容器
  • <el-col> 代表列容器，可通過 span 設置占據列數
2. 關鍵功能
  • 間隔: 使用 gutter 設置列間距
  • 響應式: 適配多種屏幕尺寸
  • 偏移: 使用 offset 設置列偏移量
  • 對齊: 支持水平和垂直對齊方式

三、布局方式詳解

1. 基礎分欄布局
<el-row><el-col :span="8">8列(33%)</el-col><el-col :span="8">8列(33%)</el-col><el-col :span="8">8列(33%)</el-col>
</el-row>
2. 設置間隔 (gutter)
<el-row :gutter="20"><el-col :span="6"><div>6列(間隔20px)</div></el-col><el-col :span="6"><div>6列(間隔20px)</div></el-col><el-col :span="6"><div>6列(間隔20px)</div></el-col><el-col :span="6"><div>6列(間隔20px)</div></el-col>
</el-row>
3. 響應式布局
<el-row :gutter="10"><!-- 超小屏幕(手機)12分欄，小屏幕(平板)6分欄，中屏及以上8分欄 --><el-col :xs="12" :sm="6" :md="8" :lg="8" :xl="8"><div>自適應布局</div></el-col><!-- 大屏應用示例 --><el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12"><div>大屏內容區域</div></el-col>
</el-row>
4. 偏移布局
<el-row><el-col :span="6" :offset="6"><div>偏移6列</div></el-col><el-col :span="6" :offset="6"><div>偏移6列</div></el-col>
</el-row>
5. 對齊方式
<!-- 水平對齊 -->
<el-row justify="center"><el-col :span="6"><div>居中</div></el-col><el-col :span="6"><div>居中</div></col>
</el-row><el-row justify="end"><el-col :span="6"><div>右對齊</div></el-col>
</el-row><!-- 垂直對齊 -->
<el-row align="middle" style="height: 100px;"><el-col :span="6"><div>垂直居中</div></el-col><el-col :span="6"><div style="height: 60px;">高度不一致</div></el-col>
</el-row>

四、完整API詳解

Row（行）屬性
參數說明類型可選值默認值
gutter列間距（單位px）number—0
justify水平排列方式stringstart/end/center/space-around/space-betweenstart
align垂直排列方式stringtop/middle/bottomtop
tag自定義HTML標簽string*div
Col（列）屬性
參數說明類型可選值默認值
span柵格占位（1-24）number—24
offset左側偏移量（列數）number—0
push向右移動列數（DOM順序不變）number—0
pull向左移動列數（DOM順序不變）number—0
xs<768px 的響應式設置number/object——
sm≥768px 的響應式設置number/object——
md≥992px 的響應式設置number/object——
lg≥1200px 的響應式設置number/object——
xl≥1920px 的響應式設置number/object——
tag自定義HTML標簽string*div
響應式對象的可選值
<el-col :md="{ span: 8, offset: 2 }">...
</el-col>

響應式配置對象屬性：

  • span - 柵格占位
  • offset - 左側偏移量
  • push - 向右移動量
  • pull - 向左移動量

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/917380.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/917380.shtml
英文地址，請注明出處：http://en.pswp.cn/news/917380.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

sdxl量化加速筆記

sdxl量化加速筆記

文章目錄一、量化加速sdxl模型1&#xff09;涉及模型2&#xff09;環境安裝3&#xff09;轉換模型safetensor to pytorch文件4&#xff09;tensorRT的環境準備&#xff08;1&#xff09;下載tensorRT 10.10&#xff08;2&#xff09;下載cuda一、量化加速sdxl模型 1&#xff0…
閱讀更多...
西門子 G120 變頻器全解析：從認知到參數設置

西門子 G120 變頻器全解析：從認知到參數設置

在工業自動化領域&#xff0c;變頻器作為電機驅動的核心設備&#xff0c;其穩定運行與精準控制直接影響生產效率。西門子 G120 變頻器憑借可靠性能與靈活配置&#xff0c;成為眾多工業場景的優選。本文將從基礎認知、操作面板到參數設置&#xff0c;全方位帶你掌握 G120 變頻器…
閱讀更多...
【自動化運維神器Ansible】YAML支持的數據類型詳解：構建高效Playbook的基石

【自動化運維神器Ansible】YAML支持的數據類型詳解：構建高效Playbook的基石

目錄 1 YAML數據類型概述 1.1 為什么數據類型很重要&#xff1f; 1.2 YAML數據類型分類 2 標量類型&#xff08;Scalars&#xff09; 2.1 字符串&#xff08;String&#xff09; 2.2 布爾值&#xff08;Boolean&#xff09; 2.3 數值&#xff08;Numbers&#xff09; 2…
閱讀更多...
基于崗位需求的康養休閑旅游服務實訓室建設方案

基于崗位需求的康養休閑旅游服務實訓室建設方案

一、康養休閑旅游服務實訓室建設方案建設需求分析康養休閑旅游服務行業的快速發展對技能人才提出了精準化、場景化的能力要求&#xff0c;康養休閑旅游服務實訓室建設方案需緊密對接健康咨詢、接待服務、康樂服務等核心崗位群的實際需求。從崗位技能來看&#xff0c;健康咨詢崗…
閱讀更多...
MES 與工業物聯網（IIoT）的化學反應：為何是智能工廠的 “神經中樞”？

MES 與工業物聯網（IIoT）的化學反應：為何是智能工廠的 “神經中樞”？

從“被動救火”到“主動預警”的工廠革命想象一下&#xff0c;當你正在家中熟睡時&#xff0c;智能手環突然震動&#xff0c;提醒你心率異常&#xff1b;早上出門前&#xff0c;手機 APP 告訴你愛車的某個零件即將達到磨損極限&#xff0c;建議及時更換。這些日常生活中的智能預…
閱讀更多...
工作好用小工具積累

工作好用小工具積累

1、內部環境太多&#xff0c;網站導航git地址&#xff1a;https://github.com/hslr-s/sun-panel/releases gitee地址&#xff1a;https://gitee.com/luofei1284999247/sun-panel
閱讀更多...
智能Agent場景實戰指南 Day 26：Agent評估與性能優化

智能Agent場景實戰指南 Day 26：Agent評估與性能優化

【智能Agent場景實戰指南 Day 26】Agent評估與性能優化 開篇 歡迎來到"智能Agent場景實戰指南"系列的第26天&#xff01;今天我們將深入探討智能Agent的評估方法與性能優化技術。構建高效、可靠的智能Agent系統需要完善的評估體系和優化策略&#xff0c;本文將系統…
閱讀更多...
機器學習——下采樣（UnderSampling），解決類別不平衡問題，案例：邏輯回歸 信用卡欺詐檢測

機器學習——下采樣（UnderSampling），解決類別不平衡問題，案例：邏輯回歸 信用卡欺詐檢測

過采樣&#xff1a; 機器學習——過采樣&#xff08;OverSampling&#xff09;&#xff0c;解決類別不平衡問題&#xff0c;案例&#xff1a;邏輯回歸 信用卡欺詐檢測-CSDN博客 &#xff08;完整代碼在底部&#xff09; 使用下采樣解決類別不平衡問題 —— 以信用卡欺詐識別為…
閱讀更多...
Qt 槽函數被執行多次，并且使用Qt::UniqueConnection無效【已解決】

Qt 槽函數被執行多次，并且使用Qt::UniqueConnection無效【已解決】

Qt 槽函數被執行多次&#xff0c;并且使用Qt::UniqueConnection無效引言一、問題描述二、解決方案三、深入了解信號和槽綁定機制引言 之前剛遇到 - 信號和槽正常連接返回true&#xff0c;但發送信號后槽函數無響應問題&#xff0c;現在又遇到槽函數執行多次&#xff0c;使用Qt…
閱讀更多...
Autosar Nm-網管報文PNC停發后無法休眠問題排查

Autosar Nm-網管報文PNC停發后無法休眠問題排查

文章目錄前言Autosar CanNm標準中的相關參數CanNmAllNmMessagesKeepAwakePN過濾功能CanNm_ConfirmPnAvailability問題描述問題原因排查解決方案擴展總結前言 Autosar Nm中針對于支持PN功能的收發器&#xff0c;要求PNC停發后允許進入休眠模式&#xff0c;開發過程中遇到PNC停發…
閱讀更多...
RK3568下的進程間通信：基于UDP的mash網絡節點通信

RK3568下的進程間通信：基于UDP的mash網絡節點通信

基于UDP的mash網絡節點通信系統實現: 最近的項目中需要實現一個功能，類似mash網絡的功能，比如 類似下圖中的多個節點之間，相互之間通信， 節點A自身的通信列表中，只有B和C，所以A發出的消息給B和C，依次類推，A發送的消息所有節點都能收到，同理，其他節點比如K節點發送的…
閱讀更多...
Effective C++ 條款17：以獨立語句將newed對象置入智能指針

Effective C++ 條款17：以獨立語句將newed對象置入智能指針

Effective C 條款17&#xff1a;以獨立語句將newed對象置入智能指針核心思想&#xff1a;使用智能指針管理動態分配的對象時&#xff0c;必須確保new操作與智能指針構造在同一獨立語句中完成&#xff0c;避免編譯器優化順序導致的內存泄漏。 ?? 1. 跨語句初始化的危險性 資源…
閱讀更多...
Linux iptables防火墻操作

Linux iptables防火墻操作

資料&#xff1a; 網絡運維相關 - iptables 【Main】 https://www.zsythink.net/archives/tag/iptables/ netfilter 在 Linux 內核 TCP/IP協議棧中的位置 【框架】【Aulaxiry】 https://zhuanlan.zhihu.com/p/93630586 1 概念詳解 ● 防火墻概念 ○ 主機防火墻 網絡防火墻 ○…
閱讀更多...
飛書推送工具-自動化測試發送測試報告一種方式

飛書推送工具-自動化測試發送測試報告一種方式

飛書推送工具 要獲取飛書開發所需的 APP_ID、APP_SECRET 以及用戶的 USER_ID&#xff0c;需通過飛書開放平臺和飛書客戶端的相關設置操作。以下是詳細步驟&#xff1a; 一、獲取 APP_ID 和 APP_SECRET&#xff08;飛書應用憑證&#xff09; APP_ID 和 APP_SECRET 是飛書開放…
閱讀更多...
從零開始的云計算生活——第三十七天，跬步千里，ansible之playbook

從零開始的云計算生活——第三十七天，跬步千里，ansible之playbook

目錄 一.故事劇情 二.Playbook簡介 三.Playbook核心元素(重要) 四.Playbook語法 五.Playbook的運行方式 六.Playbooks中tasks語法使用 1、file 2、lineinfile 3、replace 4、shell 5、debug 6、template/copy 7、fetch 8、unarchive 9、wait_for 10、yum 11、…
閱讀更多...
AI驅動下的數據新基建：騰訊游戲數據資產治理與湖倉架構革新

AI驅動下的數據新基建：騰訊游戲數據資產治理與湖倉架構革新

在大模型技術迅猛發展的今天&#xff0c;AI 正深度重塑數據基礎設施&#xff0c;推動其向智能化快速演進。如何將 AI 深度融入數據管理&#xff0c;釋放數據的潛在價值、提升運營效率&#xff0c;成為企業在構建 AI 驅動的數據資產管理體系的核心問題。在近期舉辦的“DataFun A…
閱讀更多...
ubuntu 系統風扇控制軟件 CoolerControl

ubuntu 系統風扇控制軟件 CoolerControl

背景 A6000顯卡的溫度一直都是86度左右&#xff0c;GPU的風扇轉速不夠大。 我首先把 nvidia的驅動更新了&#xff0c;但是發現風扇依然依然保持在較低的轉速。 后面無意間搜到了CoolerControl 這個linux平臺的風扇控制軟件。設置之后&#xff0c;增加了風扇的轉速&#xff0c;…
閱讀更多...
Oracle 11gR2 Clusterware應知應會

Oracle 11gR2 Clusterware應知應會

Oracle 11gR2 Clusterware應知應會 關鍵特性 啟動順序 日志路徑 資源狀態 資源管理 關鍵特性 ?? Oracle 11gR2 Clusterware的一些關鍵特性如下： 在安裝運行11gR2的Real Application Clusters數據庫之前需要先安裝11gR2 Clusterware。 GRID home包括Oracle Clusterware和AS…
閱讀更多...
微信小程序蘋果手機和安卓，怎么做適配

微信小程序蘋果手機和安卓，怎么做適配

1. 基于 rpx 單位進行布局適配微信小程序采用 rpx 作為尺寸單位&#xff0c;以實現不同設備的布局適配。小程序的屏幕寬度固定為 750rpx&#xff0c;在不同設備上通過動態計算 1rpx 對應的像素值進行適配。例如&#xff0c;在 iPhone 6 中&#xff0c;屏幕寬度為 375px&#xf…
閱讀更多...
XGBoost三部曲：XGBoost參數詳解

XGBoost三部曲：XGBoost參數詳解

之前已經介紹了XGBoost三部曲：XGBoost原理。本文詳細介紹XGBoost參數，讓大家在使用XGBoost的過程中能得心應手。后續會更新XGBoost實戰，敬請期待。 文章目錄 一、核心概念回顧 二、XGBoost算法參數整體介紹 1 原生接口和Scikit-learn接口的區別 2 參數分類詳解 三、核心Boos…
閱讀更多...
最新文章

Copyright @ 2022~2023