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

news/2024/12/5 12:29:53/

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

然后发现样式是从这里传过来的
在这里插入图片描述
发现是登录页面的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.ppmy.cn/news/1365892.html

相关文章

个人如何合法自建服务器?

随着互联网技术的不断发展,越来越多的人开始考虑自建服务器,以满足自己的需求。但是,在自建服务器之前,必须了解相关的法律法规和规定,以确保自己的行为合法合规。本文将介绍个人如何合法自建服务器,以供参…

uniappQQ登录是如何实现的,请说明其流程

QQ登录功能的实现分成以下几个步骤: 注册QQ互联账号并创建应用,获取 appid 配置回调地址 recirect_uri在页面中放置 QQ登录按钮,点击按钮后跳转到 QQ 登录页面,链接地址是由 QQ 平台提供的,需要拼接上申请的 appid登录…

Amino PEG11 COOH,Amino-PEG11-acid,可在活化剂存在下与氨基反应

您好,欢迎来到新研之家 文章关键词:1616426-12-0,Amino-PEG11-acid,Amino PEG11 COOH,H2N-PEG11-CH2CH2COOH,氨基-PEG11-羧酸 一、基本信息 【产品简介】:Amino-PEG11 acid is a heterobifun…

深圳市金航标电子有限公司

深圳市金航标电子有限公司,技术骨干来自清华大学和电子科大,吸纳海归专业人才,可以研制高可靠高性能 天线和连接器产品,在东莞塘厦和广西柳州的生产基地有自动化生产线多条,具有大批量产品的生产交付能力。金 航标电…

探索IP地址定位工具:解读IP数据云的功能与优势

在当今数字化时代,IP地址定位工具成为了许多领域中不可或缺的技术支持,为网络安全、地理定位服务和个性化推荐等提供了重要数据支持。其中,IP数据云作为一种领先的IP地址定位工具,具有一系列功能和优势,本文将对其进行…

cppzmq入门

cppzmq是一个基于ZeroMQ的开源C 库,用于构建分布式和并发应用程序。它提供了与ZeroMQ消息队列进行通信的简单接口。本文将介绍cppzmq的基本概念、常用模式以及示例代码。 基本概念 ZeroMQ:ZeroMQ是一个轻量级的消息队列库,它允许应用程序通过…

qt QPainter画灯泡

把画家(坐标原点) 移动 到如图 然后画家旋转180度最重要的是切点坐标 根据圆心坐标,原点坐标,计算切点坐标1.用QPainterPath绘制出一个圆 2.用它减去三角形路径 3.用画刷刷出上半部分,下半部分代码太乱,没…

Web安全之接口鉴权

目录 接口鉴权定义 为什么会有cookie还有session还有token这种技术的存在?