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

news2024/9/25 21:22:35

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

然后发现样式是从这里传过来的
在这里插入图片描述
发现是登录页面的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/或者 >>>(感觉这个比较好)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微信小程序开启横屏调试

我们先打开小程序项目 开启真机运行 目前是一个竖屏的 然后打开全局配置文件 app.json 给下面的 window 对象 下面加一个 pageOrientation 属性 值为 landscape 运行结果如下 然后 我们开启真机运行 此时 就变成了个横屏的效果

[vue error] TypeError: AutoImportis not a function

问题详情 问题描述: element plus按需导入后,启动项目报错: 问题解决 将unplugin-auto-import 回退到0.16.1 npm install unplugin-auto-import0.16.1 安装完后再次运行就好了

牛客周赛 Round 35 解题报告 | 珂学家 | 构造 + 组合数学

牛客周赛 Round 35 解题报告 | 珂学家 | 构造 组合数学 前言 整体评价 F/G是数学题,E是一道有趣的构造题, 需要一点点空间想象力,其他几题也不错。不过整场被python的库函数,折磨得崩溃,T_T. A. 小红的字符串切割 题型: 签到 …

IO多路复用:提高网络应用性能的利器

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

【比较mybatis、lazy、sqltoy、lambda、操作数据 】操作批量新增、分页查询【一】

orm框架使用Lambda性能比较 环境: idea jdk17 spring boot 3.0.7 mysql 8.0测试条件常规对象 orm 框架是否支持xml是否支持 Lambda对比版本mybatis☑️☑️3.5.4sqltoy☑️☑️5.2.98lazy✖️☑️1.2.3-JDK17 数据库表(含有唯一性索引s_u) CREATE TABLE sys_u…

文件底层的深入理解之文件输入输出重定向

目录 一、文件fd的分配规则 二、对输出重定向现象的理解 三、输出输入重定向的简单实现 1、输出重定向 2、输入重定向 一、文件fd的分配规则 最小的没有被使用的数组下标,会被分配给最新打开的文件。 二、对输出重定向现象的理解 正如上面这段代码所示&#xff0…

Java+SpringBoot+Vue自习室预约系统全栈开发

✍✍计算机编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java实战 |…

[C++核心编程](四):类和对象——封装

目录 封装 访问权限 struct和class的区别 成员属性设置为私有 设计案例 C面向对象的三大特性:封装、继承、多态 C认为万事万物皆为对象,对象上有其属性和行为!! 封装 意义: 将属性和行为作为一个整体&#xff0…

【学习心得】解决无限debugger的常用方法

一、什么是无限debugger 有些网站为了防止爬虫或其他恶意行为,会故意设置无限debugger作为一种简单的反爬机制,它会在开发者工具打开的情况下不断暂停执行。这对于想要分析其他代码逻辑、排查问题或进行正常开发调试工作的开发者来说极为不便。 二、解决…

图文详解:在虚拟机上安装Win7,超详细!!!

一.准备 1.虚拟机: https://pan.xunlei.com/s/VNpZ_9c2AdrnUW1YWNdhBLW-A1?pwdyp6b# 2.win7的iOS: https://pan.xunlei.com/s/VNpZd61K6a7cDG3YkI_3oVbUA1?pwdyrfp# 二.安装配置 三.配置Win7 1.记得输入原先下载的镜像文件 2.那我们选择自定义 3…

c++之旅——第二弹

大家好啊,这里是c之旅第二弹,跟随我的步伐来开始这一篇的学习吧! 如果有知识性错误,欢迎各位指正!!一起加油!! 创作不易,希望大家多多支持哦! 一、内存四区…

2024-02学习笔记

1.当我们向Set集合中添加一个已经存在的元素时 当我们向Set集合中添加一个已经存在的元素时,Set集合会如何处理呢?实际上,Set集合不会将重复的元素添加到集合中。当我们向Set集合中添加一个元素时,Set集合会首先判断该元素是否已…

支持向量机 SVM | 线性可分:公式推导

目录 一. SVM的优越性二. SVM算法推导小节概念 在开始讲述SVM算法之前,我们先来看一段定义: 支持向量机(Support VecorMachine, SVM)本身是一个二元分类算法,支持线性分类和非线性分类的分类应用,同时通过OvR或者OvO的方式可以应用…

Sora:探索大型视觉模型的前世今生、技术内核及未来趋势

Sora,一款由OpenAI在2024年2月推出的创新性文生视频的生成式AI模型,能够依据文字说明,创作出既真实又富有想象力的场景视频,展现了其在模拟现实世界方面的巨大潜能。本文基于公开技术文档和逆向工程分析,全面审视了Sor…

一文搞懂浏览器缓存机制

文章目录 概述强制缓存协商缓存总结参考文章 概述 浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的 浏览器第一次向服务器发送HTTP请求, 浏览器拿到请求结果后,会根据响应报文的缓存标识,决定是否进行缓存…

【学习总结】什么是DoS和DDoS

[Q&A] 什么是DoS DoS 是 “Denial of Service”(拒绝服务)的缩写,它是一种网络攻击方式,其目的是使目标计算机或网络资源无法为合法用户提供正常的服务。通过向目标系统发送大量请求、消耗其带宽、处理器或内存等资源&#…

【Linux网络命令系列】ping curl telnet三剑客

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

前后端分离vue+nodejs高校教室资源预约管理系统4e80m

本系统的设计与实现共包含9个表:分别是配置文件信息表,教师信息表,教室类型信息表,教室信息信息表,教室预约信息表,系统公告信息表,token表信息表,用户表信息表,学生信息表&#xff…

matplotlib散点图

matplotlib散点图 假设通过爬虫你获取到了北京2016年3, 10月份每天白天的最高气温(分别位于列表a, b), 那么此时如何寻找出气温和随时间(天)变化的某种规律? from matplotlib import pyplot as pltx_3 range(1, 32) x_10 range(51, 82)y_3 [11,17,16,11,12,11,12,6,6,7,8…

二、数据结构——单链表,双链表,栈,队列,单调栈,单调队列,KMP,Trie,并查集,堆,哈希表等内容。

对于链表来说,由于new操作时间太长,因此,算法题中一般使用静态链表。 1.单链表 采用数组实现单链表,可以直接开两个数据,一个数组存放数值,另外一个数据存放下一个元素(指针)。 示…