Vue 中修改 Element 组件的 下拉菜单(Dropdown) 的样式

Vue 中修改 Element 组件的 下拉菜单(Dropdown) 的样式

今天在项目中碰到一个 UI 改造的需求,需要根据设计图把页面升级成 UI 设计师提供的设计图样式。
到最后页面改造完了,但是 UI 提供的下拉菜单样式全部是黑色半透明的,只能硬着头皮改了。
然后,就有了一下午的头脑风暴。

一开始,我是想着使用 /deep/ 来深度修改样式的,于是就有了下面的代码:

<style lang="less" scoped>
.el-dropdown-menu {background: red!important;
}
/* 消除小三角 */
.el-popper[x-placement^=bottom] .popper__arrow{//border: none;
}
.el-popper[x-placement^=bottom] .popper__arrow::after {border-bottom-color: rgba(0, 0, 0, 0.75)!important;
}.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {background-color: transparent!important;color: rgba(22, 153, 239, 1) !important;
}
</style>

结果不生效,开始纳闷,为什么什么样式都没有应用上去。
后来查找网上大神,说不可以加 scoped 的私有化。于是我删除后再试,确实是有效,三角也变成了黑色。
在这里插入图片描述

然后,第二个问题又来了。
因为没有加 scoped 私有化,所以系统中所有的 Dropdown 的样式都变成了全黑色且三角也是黑色。
这肯定不行啊,于是又开始头脑风暴。

本来都准备使用原生直接获取 after 的元素了,后来发现不太行,能获取到但是修改 after 伪元素太麻烦了,需要添加样式表什么的。

然后我又在想,我可不可以给他加个 class 类名,我去应用它的样式。于是就有了下面的代码:

// 注意 class=“header-new-drop”
<el-treeclass="tree":data="trees":props="treeProps"@node-click="treeclick"node-key="id":auto-expand-parent="autoExpandParent":showIcon="showIcon"icon-class="el-icon-arrow-right"highlight-current@click.stop="click(item,$event)"><!--隐藏的新增等图标--><span class="custom-tree-node" slot-scope="{ node, data }"><el-dropdown trigger="hover" placement="bottom"><span class="el-dropdown-link">{{ node.label }}</span><el-dropdown-menu slot="dropdown" class="header-new-drop"><el-dropdown-item command="rename" @click.native="renameclick(data)" @rename="rename">重命名</el-dropdown-item><el-dropdown-item command="delete" @click.native="deleteclick(data)" @drop="drop">删除</el-dropdown-item></el-dropdown-menu></el-dropdown></span></el-tree>

类名加上之后,就要去用它了,这次我仍然在带有 scoped 私有化标致的样式块中定义:

<style scoped lang="less">.header-new-drop {background-color: rgba(0, 0, 0, 0.75)!important;border: 0px solid #00487f !important;border-radius: 5px;/deep/ div {    // 注意:这里转深度书写样式修改它的 div 下方 after 样式&:after {border-bottom-color: rgba(0, 0, 0, 0.75)!important;}}}.el-dropdown-menu {background-color: rgba(0, 0, 0, 0.75)!important;border: 0px solid #00487f !important;border-radius: 5px;}.el-dropdown-menu__item {color: #ffffff!important;line-height: 40px!important;padding: 0 26px!important;&:hover {background-color: transparent!important;border-radius: 5px!important;color: rgba(22, 153, 239, 1)!important;}}
</style>

好啦,大功告成,这样只在这个文件中的 Dropdown 会应用此样式,别的文件不会受到影响。
头脑风暴了一下午。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/238744.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【LeetCode】组合两个表(mysql)

题目 编写解决方案&#xff0c;报告 Person 表中每个人的姓、名、城市和州。如果 personId 的地址不在 Address 表中&#xff0c;则报告为 null 。 以 任意顺序 返回结果表。 结果格式如下所示。 答 select firstName ,lastName,city,state from Person left join Address …

[渗透测试学习] Hospital - HackTheBox

文章目录 信息搜集getshell提权信息搜集 nmap扫描一下端口 发现8080端口和443端口有http服务 然后发现3389端口是启用了ms-wbt-server服务 在对443端口的扫描没有收获,并且只有邮箱登录界面无法注册 接着看向8080端口,我们随便注册用户登录后发现有文件上传功能 getshell …

git撤销提交到本地的commit

有些时候&#xff0c;当我们提交代码到本地后&#xff0c;突然发现因为某些原因需要撤销提交本地的代码。 就比如我&#xff0c;因为代码写错了分支&#xff0c;已经提交到本地了&#xff0c;而我需要取消&#xff0c;并且还要把代码搞得另外的分支上。 提交前&#xff1a; …

放空一下自我 free

文章目录 放空一下自我 free默认的效果使用易读的参数间隔显示内存状态查看meminfo文件更多信息 放空一下自我 free **free**这个命令在Linux系统监控的工具里面&#xff0c;算是使用的比较多的一个。 使用_man_查看可知&#xff0c;官方含义为&#xff1a; Display amount o…

基于Spring Boot+vue的云上新鲜水果超市商城系统

本云上水果超市是为了提高用户查阅信息的效率和管理人员管理信息的工作效率&#xff0c;可以快速存储大量数据&#xff0c;还有信息检索功能&#xff0c;这大大的满足了用户、员工信息和管理员这三者的需求。操作简单易懂&#xff0c;合理分析各个模块的功能&#xff0c;尽可能…

SpringMVC-异常处理及常用组件

异常处理器 1.基于配置的异常处理 springmvc提供了一个处理控制器方法执行过程中所出现的异常的接口: HandlerExceptionResolver HandlerExceptionResolver接口的实现类有: DefaultHandlerExceptionResolver和SimpleMappingExceptionResolver springmvc提供了自定义的异常处…

实践学习PaddleScience飞桨科学工具包

实践学习PaddleScience飞桨科学工具包 动手实践&#xff0c;在实践中学习&#xff01;本项目可以在AIStudio平台一键运行&#xff01;地址&#xff1a;https://aistudio.baidu.com/projectdetail/4278591 本项目第一次执行会报错&#xff0c;再执行一次即可。若碰到莫名其妙的…

C++ | 四、指针、链表

指针 指针用来储存地址定义方式&#xff0c;int *ptr;&#xff0c;使用*来表示所定义的变量是指针取地址符&#xff0c;ptr &a;&#xff0c;通过&来取得一个普通变量的地址&#xff0c;并储存到指针中取值&#xff08;解引用&#xff09;&#xff0c;想要取得一个指针…

15.鸿蒙HarmonyOS App(JAVA)进度条与圆形进度条

15.鸿蒙HarmonyOS App(JAVA)进度条与圆形进度条 progressBar2.setIndeterminate(true);//设置无限模式,运行查看动态效果 //创建并设置无限模式元素 ShapeElement element new ShapeElement(); element.setBounds(0,0,50,50); element.setRgbColor(new RgbColor(255,0,0)); …

排序——计数排序

文章目录 概念思路绝对映射&#xff1a;相对映射 代码实现特性结果演示 概念 计数排序是一个非基于比较的排序算法&#xff0c;该算法于1954年由 Harold H. Seward 提出。它的优势在于在对一定范围内的整数排序时&#xff0c;它的复杂度为Ο(nk)&#xff08;其中k是整数的范围…

typora导出html添加目录

typora导出html添加目录 使用方法 首先要从typora导出html文件&#xff0c;之后用记事本编辑器html文件 找到文档最后面&#xff0c;如图&#xff1a; 用文字编辑类工具打开sideBar.txt&#xff0c;复制其中所有内容【内容在下面】 在如上图的位置插入所复制的内容 打开修改…

【深入挖掘Java技术】「源码原理体系」盲点问题解析之HashMap工作原理全揭秘(上)

HashMap工作原理全揭秘 — 核心源码解析 知识盲点概念介绍数据结构数组链表数组VS链表哈希表不同JVM版本HashMap的展现形式 HashMap VS HashTable特性区别对比 hashcodehashCode的作用equals方法和hashcode的关系key为null怎么办执行步骤 核心参数容量探讨负载因子探讨加载因子…

usb个人总结

一、usb工具分析 1、不同的usb抓包工具抓包分析 2、USB抓包分析方式 外接usb分析仪分析 &#xff08;1&#xff09;力科usb分析仪 &#xff08;2&#xff09;HD-USB12 协议分析仪 &#xff08;3&#xff09;沁恒CH552 usb分析仪&#xff0c;软件工具USB2.0 Monitor (4)等等…

PHP留言板实现

完整教程PHP留言板 登陆界面 一个初学者的留言板&#xff08;登录和注册&#xff09;_php留言板登录注册-CSDN博客 留言板功能介绍 百度网盘 请输入提取码 进入百度网盘后&#xff0c;输入提取码&#xff1a;knxt&#xff0c;即可下载项目素材和游客访问页面的模板文件。 &…

基于springboot书籍学习平台源码和论文

首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项…

数学建模-Matlab R2022a安装步骤

软件介绍 MATLAB是一款商业数学软件&#xff0c;用于算法开发、数据可视化、数据分析以及数值计算的高级技术计算语言和交互式环境&#xff0c;主要包括MATLAB和Simulink两大部分&#xff0c;可以进行矩阵运算、绘制函数和数据、实现算法、创建用户界面、连接其他编程语言的程…

行云部署成长之路 -- 慢 SQL 优化之旅 | 京东云技术团队

当项目的SQL查询慢得像蜗牛爬行时&#xff0c;用户的耐心也在一点点被消耗&#xff0c;作为研发&#xff0c;我们可不想看到这样的事。这篇文章将结合行云部署项目的实践经验&#xff0c;带你走进SQL优化的奇妙世界&#xff0c;一起探索如何让那些龟速的查询飞起来&#xff01;…

【C++干货铺】会旋转的二叉树——AVLTree

个人主页点击直达&#xff1a;小白不是程序媛 C系列专栏&#xff1a;C干货铺 代码仓库&#xff1a;Gitee 目录 前言 AVL树 AVL树的概念 AVL树结点的定义 AVL树的插入 寻找插入结点的位置 修改平衡因子 AVL树的旋转 右单旋 左单旋 先右旋再左旋 先左旋再右旋 AVL树…

SpringBoot多环境配置Maven Profile组

Maven profile组 注意切换配置时 mvn clean下 或者 clean 加install 或者compile 编译 clean之后 install下 或者compile 编译 nohup java -Xms256m -Xmx512m -Dfile.encodingUTF-8 -jar demo.jar --spring.profiles.activeprod > system.log 2>&1 &

数据交付变革:研发到产运自助化的转型之路

作者 | Chris 导读 本文讲述为了提升产运侧数据观察、分析、决策的效率&#xff0c;支持业务的快速迭代&#xff0c;移动生态数据研发部对数仓建模与BI工具完成升级&#xff0c;采用宽表建模与TDA平台相结合的方案&#xff0c;一站式自助解决数据应用需求。在此过程中&#xff…