vue项目,如何修改Element-Plus等UI组件库的样式,三种方式搞定!!!
前言
我们在学习和使用组件库构建页面的时候,时常会遇到这样的问题。
即,尽管组件库已经提供了较多的功能,来帮助我们构建自定义的效果,但有时仍不能使我们满意。
这个时候我们就不得不修改UI库的样式,来达到想要的状态。
以Element-Plus为例,在Vue3中,主要有三种方式可以实现自定义第三方组件库的样式。
项目背景
例如,我希望调节Element-Plus中的Autocomplete(自动补全输入框) 组件的输入框宽度,但是查看文档,却发现官方并没有提供这样的接口。
这个时候,我就不得不手动的查看组件的HTML实现,并且对样式进行调整。
首先F12来查看其HTML源码,如下所示。

这时候我们可以快速发现需要调整样式的div层,然后在Vue项目中通过三种方式进行调整。
实现方式
全局样式
默认的<style>标签中的样式就是全局样式,这意味着,其中的任何样式都会对整个项目生效,因此需要谨慎使用。
<style>
.el-input__wrapper {width: 600px
}
</style>
全局选择器:global()
全局选择器的效果和全局样式基本一致,但是它可以被用在<style scoped>中,这样你的组件中既能够定义非全局的样式,又能定义全局样式。
<style scoped>
:global(.el-input__wrapper) {width: 600px
}
</style>
深度选择器(推荐)
深度选择器可以用于定义子组件的专属样式,不易发生冲突。因而相对于前两种定义全局样式的方式更加合适。
<style scoped>
:deep(.el-input__wrapper) {width: 600px
}
</style>
相关文章:
vue项目,如何修改Element-Plus等UI组件库的样式,三种方式搞定!!!
前言 我们在学习和使用组件库构建页面的时候,时常会遇到这样的问题。 即,尽管组件库已经提供了较多的功能,来帮助我们构建自定义的效果,但有时仍不能使我们满意。 这个时候我们就不得不修改UI库的样式,来达到想要的状…...
httpd协议与apache
1.http 相关概念 HTTP是处于应用层的协议,使用TCP传输层协议进行可靠的传送。因此,需要特别提醒的是,万维网是基于因特网的一种广泛因特网应用系统,且万维网采用的是HTTP(80/TCP)和 HTTPS(443/…...
Go 自学:文件的写入和读取
首先,使用os.Create()函数建立一个文件。 接着,使用io.WriteString()函数将内容写入文件。 最后,使用os.ReadFile()函数读取文件内容。 注意,这里读取的文件内容是data byte,我们需要使用string()函数将其转换为字符串…...
py 项目上线centos
1 服务器py版本 ps -ef|grep python|grep -v grep 2 2.x版本 安装 PyMySQL pip install PyMySQL0.9.3 3 后台运行py文件 nohup python down.py 1 > log.log 2>&1 & 这个命令将 down.py 程序放入后台运行, 同时将 stdout 输出到 log.log 文件中&…...
【git】would clobber existing tag 报错解决
问题 在用vscode的Git去pull代码的时候git弹窗报错,查看报错日志发现以下内容: > git pull --tags origin feature/xxx-2.0.0 From 173.110.11.22:VV-WORK-FE/vv-desktop* branch feature/xxx-2.0.0 -> FETCH_HEAD! [rejected] …...
Python OCR 使用easyocr库将图片中的文章提取出来
Python OCR 使用easyocr库将图片中的文章提取出来 初环境内容步骤一:安装easyocr库步骤二:导入必要的库步骤三:创建OCR阅读器对象步骤四:指定要识别的图片路径步骤五:执行OCR识别并提取文章内容步骤六:遍历…...
门禁系统忘记登入密码,现在更换电脑如何迁移旧电脑门禁系统的数据
环境: ivms-4200 v3.10.0.6_c 问题描述: 门禁系统忘记登入密码,现在更换电脑如何迁移旧电脑门禁系统的数据,旧电脑记住密码,忘了密码和密保了 解决方案: 1.前往海康官网下载4200客户端,在新电脑上安装 …...
初试Eureka注册中心
Eureka是spring cloud中的一个负责服务注册与发现的组件。遵循着CAP理论中的A(可用性)P(分区容错性)。一个Eureka中分为eureka server和eureka client。其中eureka server是作为服务的注册与发现中心。 搭建eureka服务 引入eureka依赖 引入SpringCloud为eureka提供的starter依…...
【趣味随笔】怎么维护自己的电脑?
📢:如果你也对机器人、人工智能感兴趣,看来我们志同道合✨ 📢:不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 📢:文章若有幸对你有帮助,可点赞 👍…...
element 下拉组件获取对象
// 选择数据user:[{name:"小白",id:1,money:"100",love:"蛋糕"},{name:"小黑",id:2,money:"200",love:"奶茶"},{name:"小红",id:3,money:"300",love:"烧烤"},] <div><el…...
IDEA下SpringBoot指定环境、配置文件启动
1、idea下的SpringBoot启动:指定配置文件 Springboot项目有如下配置文件 主配置文件application.yml, 测试环境:application-test.yml 生产环境:application-pro.yml 开发环境:application-dev.yml 1.1.配置文件…...
python可视化matplotlib——绘制正弦和余弦
这是一个使用matplotlib库绘制正弦和余弦函数曲线的代码示例。代码中导入了需要的库,并设置了x轴和y轴的标签字体为华文楷体。然后,使用numpy生成一组x轴上的值t,并使用正弦函数生成对应的y轴值s,再使用余弦函数生成对应的y轴值z。…...
Day48|leetcode 198.打家劫舍、213.打家劫舍II、打家劫舍|||
leetcode 198.打家劫舍 题目链接:198. 打家劫舍 - 力扣(LeetCode) 视频链接:动态规划,偷不偷这个房间呢?| LeetCode:198.打家劫舍_哔哩哔哩_bilibili 题目概述 你是一个专业的小偷,…...
Mysql001:Mysql概述以及安装
前言:本课程将从头学习Mysql,以我的工作经验来说,sql语句真的太重要的,现在互联网所有的一切都是建立在数据上,因为互联网的兴起,现在的数据日月增多,每年都以翻倍的形式增长,对于数…...
如何调用api接口获取到商品数据
要调用API接口获取商品数据,需要进行以下步骤: 1.确定API接口 首先需要确定要使用的API接口,可以通过搜索引擎或者相关文档来查找适合的API接口。以淘宝开放平台为例,可以使用淘宝的商品信息查询API接口来获取商品数据。 2.注册…...
http请求方式过滤器与拦截器的区别
get:获取查询数据(查询)post:数据的提交,新增操作(增加)put:向服务端发送数据、改变信息,侧重点在于对数据的修改操作delete:数据库数据的删除head:一般用来判断类型、根据返回状态确定资源是否存在、资源是否更新以及更新的时间等 过滤器与拦截器的区别…...
大语言模型初学者指南 (2023)
大语言模型 (LLM) 是深度学习的一个子集,它正在彻底改变自然语言处理领域。它们是功能强大的通用语言模型,可以针对大量数据进行预训练,然后针对特定任务进行微调。这使得LLM能够拥有大量的一般数据。如果一个人想将LLM用于特定目的ÿ…...
日常生活小技巧 -- 单位换算
开发过程中经常需要需要单位换算的地方。 可以使用工具进行转换: 工具:单位转换 常用单位: 1、角度转换 1弧度(rad) 180/PI 度(deg) 57.29577951308232 度(deg) 1度…...
利用深度蛋白质序列嵌入方法通过 Siamese neural network 对 virus-host PPIs 进行精准预测【Patterns,2022】
研究背景: 病毒感染可以导致多种组织特异性损伤,所以 virus-host PPIs 的预测有助于新的治疗方法的研究;目前已有的一些 virus-host PPIs 鉴定或预测方法效果有限(传统实验方法费时费力、计算方法要么基于蛋白结构或基因ÿ…...
opencv 车牌号的定位和识别+UI界面识别系统
目录 一、实现和完整UI视频效果展示 主界面: 识别结果界面:(识别车牌颜色和车牌号) 查看历史记录界面: 二、原理介绍: 车牌检测->图像灰度化->Canny边缘检测->膨胀与腐蚀 边缘检测及预处理…...
Workbench与Ls-Dyna中位移与远程位移设置的关键字映射解析
1. 固定支撑的关键字映射与实战配置 在有限元分析中,固定支撑是最基础的边界条件之一。Workbench和Ls-Dyna对固定支撑的实现逻辑完全不同,但最终达到的约束效果是等效的。先看Workbench端的操作:在Mechanical界面右键选择Ls-Dyna环境…...
Remotery WebSocket通信机制:浏览器端性能数据可视化
Remotery WebSocket通信机制:浏览器端性能数据可视化 【免费下载链接】Remotery Single C file, Realtime CPU/GPU Profiler with Remote Web Viewer 项目地址: https://gitcode.com/gh_mirrors/re/Remotery Remotery作为一款轻量级实时CPU/GPU性能分析工具&…...
zotero-style:智能文献管理在学术研究中的创新实践
zotero-style:智能文献管理在学术研究中的创新实践 【免费下载链接】zotero-style zotero-style - 一个 Zotero 插件,提供了一系列功能来增强 Zotero 的用户体验,如阅读进度可视化和标签管理,适合研究人员和学者。 项目地址: ht…...
OpCore-Simplify:零基础黑苹果配置终极指南,5分钟搞定复杂EFI
OpCore-Simplify:零基础黑苹果配置终极指南,5分钟搞定复杂EFI 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在为黑苹果配置…...
OpenClaw技能扩展:安装百川2-13B-4bits专用插件提升自动化能力
OpenClaw技能扩展:安装百川2-13B-4bits专用插件提升自动化能力 1. 为什么需要为OpenClaw安装专用插件 去年冬天,我在处理一批技术文档归档任务时,发现OpenClaw的基础能力虽然强大,但在处理特定领域内容时总有些力不从心。比如让…...
国产数据库新选择:SpringBoot集成KingbaseES的性能优化全攻略
SpringBoot集成KingbaseES性能调优实战指南 当企业级应用遇到国产数据库新贵KingbaseES,性能优化便成为开发者最关心的核心议题。作为一款兼容PostgreSQL协议的高性能国产数据库,KingbaseES在金融、政务等关键领域展现出越来越强的竞争力。但要让SpringB…...
【紧急预警】Mojo nightly build已悄然移除PyModule::import() API!立即备份旧版+迁移至PyO3 0.21+手动GC管理方案(附自动化迁移脚本)
第一章:【紧急预警】Mojo nightly build已悄然移除PyModule::import() API!立即备份旧版迁移至PyO3 0.21手动GC管理方案(附自动化迁移脚本)Mojo nightly build v2024.06.12 起,PyModule::import() 已被彻底移除&#x…...
22:L应用区块链+AI:蓝队的分布式安全
作者: HOS(安全风信子) 日期: 2026-03-19 主要来源平台: GitHub 摘要: 区块链的不可篡改特性与AI的智能分析能力相结合,为蓝队防御带来了新的可能性。L深入研究区块链AI的融合应用,构建了一个分布式、透明、…...
OpenOCD入门到精通:第23章 添加新的 JTAG 适配器驱动
第23章 添加新的 JTAG 适配器驱动 导读摘要:OpenOCD 支持 40 余种调试适配器,每种适配器背后都有一个遵循统一接口规范的驱动程序。本章从 adapter_driver 结构体出发,逐一解析其回调函数语义,介绍 libusb/HIDAPI 通信层封装,并通过一个完整的简易驱动实现示例,帮助读者掌…...
别再只用交叉熵了!深入对比YOLOv8中Focal Loss与CIoU Loss的改进效果与适用场景
深入解析YOLOv8损失函数优化:Focal Loss与CIoU Loss的实战对比与场景适配 当你在深夜调试YOLOv8模型时,是否遇到过这样的困境:明明增加了训练数据,小目标检测的准确率却始终上不去?或是发现模型对密集排列的物体总是漏…...
