基础组件

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