vue中scss样式污染引发的思考

新做了一个项目,就是在登录后,就会产生左侧菜单的按钮颜色不一样。
在这里插入图片描述

然后发现样式是从这里传过来的
在这里插入图片描述
发现是登录页面的css给污染了
在这里插入图片描述
就是加了scope就把这个问题解决了
在这里插入图片描述
然后想总结一下这个思路:就是如何排查污染样式:
如果出现了html元素定位错乱或者显示不正常, 而且觉得自己写的没有问题的情况下,我都是通过chrome的开发者工具,去看是什么导致的这个样式问题,然后看这个样式的来源去确定。

在这里插入图片描述

在这里插入图片描述
此可知,添加scoped属性的组件,为了达到不污染全局,做了如下处理

1.给HTML的DOM节点加一个不重复属性data-v-xxxx 标志唯一性;
2.在添加scoped属性的组件的每个样式选择器后添加一个等同与“不重复属性”相同的字段,实现类似于“作用域”的作用,不影响全局;
在这里插入图片描述

3.如果组件内部还有组件,只会给最外层的组件里的标签加上唯一属性字段,不影响组件内部引用的组件(例如这里我使用了el-button,但是他只给外层的加了data-v-xxxx这个内容,里面的span并没有增加这个内容)
在这里插入图片描述
这样的问题就是不能修改子组件里面的样式内容了
解决方法:

1、不给style样式加scoped(这个不可能用,因为不能不加)
2、里面有个加scoped的style样式,再单独写了style标签,不加scoped的属性里面写修改的样式。(感觉也不太好)
3、::v-deep 加改动的样式 ;注意如果用scss的话 需改为 /deep/或者 >>>(感觉这个比较好)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

前端同时传递文件数据+非文件数据,前后端解决方案

之前录制视频《文件上传组件》的时候有位观众提了个问题,如果我没有理解错的话,应该就是前后同时传递文件数据 非文件数据,前后端数据该如何接收,这里我给出我自己的解决方案 tip:下文在编写前端代码的时候,用到了这篇…

EAS web 界面加载后,隐藏按钮

效果:隐藏下列按钮: 实现方法: 1、创建数据装载事件: 2、隐藏按钮: afterOnloadHideEntryTBBBBBB:function(e){console.log("----------失败222!!!!!&a…

大数据旅游数据分析:基于Python旅游数据采集可视化分析推荐系统

文章目录 基于Python旅游数据采集可视化分析推荐系统一、项目概述二、项目说明三、开发环境四、功能实现五、系统页面实现用户登录注册系统首页数据操作管理价格与销量分析旅游城市和景点等级分析旅游数据评分情况分析旅游数据评论情况分析旅游景点推荐Django系统后台管理 六、…

技术派数据库表自动初始化(学习)

不需要在db中手动创建或者导入相关的schema、data&#xff0c;项目启动自动创建对应的表&#xff0c;并初始化。实现该过程。 Liquibase数据库版本管理 依赖配置 在paicoding-web模块中&#xff0c;pom.xml 文件中添加 <dependency><groupId>org.liquibase</g…

Java毕业设计 基于SSM SpringBoot vue购物比价网站

Java毕业设计 基于SSM SpringBoot vue购物比价网站 SSM vue 购物比价网站 功能介绍 首页 图片轮播 商品 商品分类 商品详情 评论 收藏 商品攻略 商品信息 公告栏 在线反馈 登录 注册 个人中心 我的收藏 后台管理 登录 注册商品户 个人中心 修改密码 个人信息 商品户管理 用户…

污水处理设备远程监控:HiWoo Cloud如何打造智慧环保新时代

随着工业化和城市化的快速推进&#xff0c;污水处理成为了保护环境、维护生态平衡的重要一环。传统的污水处理设备管理方式往往依赖于人工巡检和现场控制&#xff0c;不仅效率低下&#xff0c;而且难以实时掌握设备的运行状况。在这个背景下&#xff0c;HiWoo Cloud平台推出了污…

如何使用固定公网地址远程访问本地RStudio Server【内网穿透】

文章目录 前言1. 安装RStudio Server2. 本地访问3. Linux 安装cpolar4. 配置RStudio server公网访问地址5. 公网远程访问RStudio6. 固定RStudio公网地址 前言 RStudio Server 使你能够在 Linux 服务器上运行你所熟悉和喜爱的 RStudio IDE&#xff0c;并通过 Web 浏览器进行访问…

【小沐学C++】C/C++包管理工具Conan使用(C++、Python、CMake、Conan)

文章目录 1、简介2、Conan下载安装3、Conan命令3.1 查看conan版本3.2 更新conan库3.3 搜索软件包3.4 显示conan所有源3.5 查看软件包3.6 通过conanfile.txt安装依赖包 结语 1、简介 Conan是C和C语言的依赖项和包管理器。它是免费和开源的&#xff0c;适用于所有平台&#xff0…

知识蒸馏 pytorch官网源码分析

参考连接&#xff1a; Knowledge Distillation Tutorial — PyTorch Tutorials 2.2.1cu121 documentation 方法一 &#xff1a; 知识蒸馏的损失函数只接受两个相同维度的输入&#xff0c;所以我们需要采取措施使他们在进入损失函数之前是相同维度的。我们将使用平均池化…

考研初试没过线怎么办?你还有这些机会!

2024年研考初试成绩已经发布。 研究生考试国家线大概率在下个月公布。 过了国家线的同学可以继续准备复试或者选择调剂。 如果初试失利没过线&#xff0c;也不要急着放弃&#xff01; 我们还有上岸拿硕士学位的机会&#xff01; 考研初试没过线,我们还可以这样入学&#x…

【JavaEE进阶】 Spring AOP详解

文章目录 &#x1f38b;前言&#x1f38d;Spring AOP核心概念&#x1f6a9;切点(Pointcut)&#x1f6a9;连接点(Join Point)&#x1f6a9;通知(Advice)&#x1f6a9;切面(Aspect) &#x1f340;通知类型&#x1f6a9;注意事项 &#x1f332;PointCut&#x1f384;切面优先级Ord…

【JavaEE进阶】 Spring AOP快速上手

文章目录 &#x1f343;什么是AOP&#x1f333;什么是Spring AOP&#x1f334;上手Spring AOP&#x1f6a9;引入依赖&#x1f6a9;编写AOP程序 ⭕总结 &#x1f343;什么是AOP AOP是Aspect Oriented Programming的简称&#xff08;又称为面向切⾯编程&#xff09; 什么是面向…

面试笔记系列四之SpringBoot+SpringCloud+计算机网络基础知识点整理及常见面试题

目录 Spring Boot 什么是 Spring Boot&#xff1f; Spring Boot 有哪些优点&#xff1f; SpringBootApplication注解 Spring Boot 的启动流程 Spring Boot属性加载顺序 springboot自动配置原理是什么&#xff1f;&#xff08;*&#xff09; 如何理解springboot中的start…

ISP代理是什么?跨境账号养号为什么要选择它?

在跨境出海业务中&#xff0c;代理IP对于您的在线任务至关重要&#xff0c;尤其是对于那些运行多个帐户的人来说。为您的帐户选择正确类型的代理对于确保帐户安全非常重要&#xff0c;劣质的IP容易使账号遭受封号风险。IPFoxy的多种代理IP类型应用范围各有侧重&#xff0c;其中…

ICML 2023 | 可证明的动态多模态融合框架论文整理

主要思想 提出一种针对低质量数据的通用的动态多模态融合框架&#xff0c;利用多模态融合得到的泛化误差去动态更新各个单模态预测器, 使得多模态决策倾向于更多地依赖于高质量模态 &#xff0c;而不是其他模态 。通过动态确定每种模态的融合权重来减轻不可靠模态的影响。&…

3月5日济南,2024生物发酵展全新起航!助力打造生物产业经济新时代

生物发酵是生物产业的重要组成部分&#xff0c;近年来&#xff0c;我国生物产业发展迅猛&#xff0c;生物发酵技术也已广泛应用于食品、农业、医药、饲料、日化、材料等领域&#xff0c;市场前景广阔。2022年5月&#xff0c;国家发改委发布的《“十四五”生物经济发展规划》明确…

霍格沃兹遗产显示找不到emp.dll无法继续执行此代码的多种解决方法

在《霍格沃茨&#xff1a;遗产》这款游戏中&#xff0c;如果发现无法找到必要的文件emp.dll&#xff0c;emp.dll作为游戏运行过程中不可或缺的核心组件之一&#xff0c;它的缺失会导致游戏根本无法启动&#xff0c;玩家将无法正常进入并探索这个充满魔法与奇幻色彩的霍格沃茨世…

MySQL(基础篇)——函数、约束

一.函数 1.定义 函数是指一段可以直接被另一段程序调用的程序或代码。 2.字符串函数 常见如下&#xff1a; -- 字符串拼接 SELECT CONCAT(hello,MySql) AS CONCAT -- 将字符串全部转为小写 SELECT LOWER(HEllo MYSql) AS LOWER -- 将字符串全部转为大写 SELECT UPPER(Hello…

(C语言)二分查找

在⼀个升序的数组中查找指定的数字n&#xff0c;很容易想到的⽅法就是遍历数组&#xff0c;但是这种⽅法效率⽐较低。⽐如我买了⼀双鞋&#xff0c;你好奇问我多少钱&#xff0c;我说不超过300元。你还是好奇&#xff0c;你想知道到底多少&#xff0c;我就让你猜&#xff0c;你…

谷歌SEO推广提高网站点击率的10个秘籍-华媒舍

在当今数字化时代&#xff0c;拥有一个高点击率的网站对于企业和个人而言至关重要。通过谷歌SEO推广&#xff0c;可以帮助网站吸引更多的流量&#xff0c;并在搜索引擎结果页面&#xff08;SERP&#xff09;中获得更好的排名。本文将介绍10个谷歌SEO推广的秘籍&#xff0c;帮助…