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/或者 >>>(感觉这个比较好)

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

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

相关文章

东莞IBM服务器维修之IBM x3630 M4阵列恢复

记录东莞某抖音电商公司送修一台IBM SYSTEM X3630 M4文档服务器RAID6故障导致数据丢失的恢复案例 时间:2024年02月20日, 服务器品牌:IBM System x3630 M4,阵列卡用的是DELL PERC H730P 服务器用途和用户位置:某抖音电…

李沐《动手学深度学习》优化算法(相关概念、梯度下降法、牛顿法)

系列文章 李沐《动手学深度学习》预备知识 张量操作及数据处理 李沐《动手学深度学习》预备知识 线性代数及微积分 李沐《动手学深度学习》线性神经网络 线性回归 李沐《动手学深度学习》线性神经网络 softmax回归 李沐《动手学深度学习》多层感知机 模型概念和代码实现 李沐《…

二叉树(C/C++)

本篇将较为详细的介绍二叉树的相关知识,以及二叉树的实现。对于二叉树的相关知识,本篇介绍了其概念、特殊的二叉树、性质还有存储结构。 接着对于实现二叉树的每个函数都有其思路讲解,主要的函数分为:遍历:前中后序遍历…

【低代码开发_RuoYi_框架】RuoYi框架_前端页面部署/搭建

开源软件的影响力 随着信息技术的快速发展,开源软件已经成为软件开发的趋势,并产生了深远的影响。开源软件的低成本、可协作性和透明度等特点,使得越来越多的企业和个人选择使用开源软件,促进了软件行业的繁荣。然而,…

白酒:新工艺、新技术在白酒生产中的应用与展望

随着科技的不断发展,新工艺、新技术在豪迈白酒生产中的应用越来越广泛。这些新技术的应用,不仅提高了豪迈白酒的品质和生产效率,还为白酒产业的可持续发展提供了有力支持。 首先,新工艺在豪迈白酒生产中的应用具有重要意义。传统的…

Redis的BigKey

文章目录 1. 常见面试题2. MoreKey案例2. BigKey2. BigKey生产调优 1. 常见面试题 海量数据里查询某一个固定前缀的key?你如何生产上限制key * /flushdb /flushall等危险命令以防止误删误用?Memory Usage命令你用过吗?多大算BigKey&#xff…

双流机场到天府机场ADS-B数据导入MATLAB

MATLAB导入数据 导入的数据Excel部分截图: 一些处理 % 导入外部轨迹数据并转成标准形式 clear;clc; %% 导入&预处理 [NUM,TXT,RAW]xlsread(2021年10月31日CTU-TFU); time_cell RAW(3:end,1); %拉取时间数据(cell) time_char char(t…

php基础学习之错误处理(其二)

在实际应用中,开发者当然不希望把自己开发的程序的错误暴露给用户,一方面会动摇客户对己方的信心,另一方面容易被攻击者抓住漏洞实施攻击,同时开发者本身需要及时收集错误,因此需要合理的设置错误显示与记录错误日志 一…

最新开源!用C++编写的3D gaussian splatting

大家好,小柠檬给大家推荐一个用C编写的3D gaussian splatting的免费开源实现,专注于可移植、精益和快速。 OpenSplat采用相机姿势稀疏点,并计算一个场景文件(.ply),稍后可以导入该文件以在其他软件中查看、…

在VMware中安装CentOS 7并配置Docker

VMware安装CentOS 7 一、介绍 该文章介绍如何使用启动U盘在虚拟机里面安装系统,虚拟机版本为VMware Workstation 16 pro,Linux版本为CentOS Linux release 7.9.2009 (Core)。 二、安装 1、创建虚拟机 点击创建新的虚拟机 选择典型就可以了&#xf…

利用圆锥渐变属性 conic-gradient() 实现仪表盘进度条效果

实现仪表盘初步思路 利用 css 中 圆锥渐变属性 绘制出中心向四周发散的图形。添加遮挡物&#xff0c;与背景色一致&#xff0c;遮盖掉中心内容&#xff0c;达到环形效果。 实现步骤 圆形仪表盘背景 绘制黑色圆形背景 <div class"circle"> </div> &l…

Java进阶-集合(3)与泛型

这次介绍集合中的Iterator迭代器&#xff0c;以及泛型。简单来说&#xff0c;泛型对集合的元素类型进行了限制&#xff0c;使用泛型可以在编译时检查类型安全&#xff0c;提高代码的重用率。内容如下 一、Iterator迭代器 1、概念 Iterator迭代器是一个接口&#xff0c;作用…