vue的样式污染问题及解决方案

最新推荐文章于 2024-02-03 14:34:02 发布
最新推荐文章于 2024-02-03 14:34:02 发布
阅读量6k 收藏 2
点赞数 2
分类专栏： vue 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aaaawwwwssssdsaw/article/details/79854971
版权

    接手一个项目，某个页面的样式总是会是会在演示的时候乱掉，但是我自己开发的时候该页面样式始终保持正常。

    研究了半天才发现原因。另一个开发写页面时自定义了一些style。如果不打开他的页面就没问题，但是如果在打开他的页面之后打开我的页面，vue的某个特性就会导致他的样式污染我的页面样式。

    解决方法：

    在他的style上加入scope属性：


值得注意的是，vue的scope属性会导致该style不能覆盖Import进来的css样式文件

渴望死亡的小丑
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue单页面修改样式无法覆盖问题
01-19
当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。 vue组件编译后，会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局。 比如： <style scoped> .example { color: red; } </style> hi 转换结果： <style> .example[data-v-f3f3eg9] { color: red; } </styl
vue + vue-print-nb 实现打印 以及 样式布局问题
smile2333的博客
04-28 2281
2、在 main.js 中引用。5、去掉打印的页眉和页脚。4、样式布局不生效问题。
vue2中多次请求导致数据污染
Moonlight的博客
02-03 354
今天遇到一个很神奇的bug，代码反复检查了半天，也调试了半天都没有发现问题在哪里，最后才发现是数据杯污染。。。。。
Vue 组件间的样式污染
前端小菜鸟的博客
08-11 1393
1.多个组件的样式会互相影响 原因：组件天生隔离，可是在 Vue 当中，运行的载体还是浏览器，所有的样式类还是会通过
如何解决vue的样式污染
weixin_35748962的博客
01-06 1503
有几种方法可以解决 Vue 中的样式污染问题： 使用 CSS Modules。CSS Modules 允许你将组件的样式定义在组件内部，并使用类似于 JavaScript 模块的方式导入样式。这样，每个组件的样式就只能在组件内部使用，因此不会发生样式污染。 使用 scoped 属性。如果你的项目不使用 CSS Modules，也可以在组件的样式表中使用 scoped 属性。scoped 属性会...
使用vue-print-nb打印el-table问题总结
qq_43807473的博客
01-24 966
css样式添加媒体查询 @media print {} 样式只有在打印的时候才会生效。4、不需要打印的内容 在标签上添加class名。1、解决单选框复选框打印时选中消失的问题。2、解决表格打印时表格显示不全的问题。3、解决table 序号打印错乱问题。
浅谈VUE中的样式污染问题
qq_33204193的博客
02-23 7546
在使用VUE做项目的时候，随着页面的增加，重复调用同一种组件，造成的样式污染问题不容小视。 查找了相关的资料和结合实际项目，我遇到的样式污染问题主要由以下两个原因造成： 使用了同一种组件，却在CSS中对该组件设置了不同的样式； 子元素的根元素会继承父元素的 ScopeId； 目前可以的解决方案是： 1.在写每一个.Vue页面时，一开始就将style设置为scoped（注意：scoped原理就是...
vue项目中的样式污染
milijiangjun的博客
09-15 1377
在界面之中： 我们在vue项目中写css 的时候 要用 <style lang="scss" scoped> </style> 应为 不加的话，有可能对 全局样式造成污染，然后把其它页面污染了造成变形。记录备查
vue 避免全局样式污染的正确做法
weixin_42066070的博客
05-23 5236
说明问题：样式全局污染产生的bug，会影响到其他页面原有的样式，导致每个页面的样式互相冲突，如果写的代码造成了全局样式污染，导致别人的页面每个地方都要去写自定义页面的代码，导致工作量巨大，严重的话，领导会让你当场辞职。 解决方案： 1.避免造成全局污染，每个vue页面必须加上scoped <style lang="scss" scoped> .app-container { flex: 1; padding: 15px; box-sizing: border-box; b
vue项目中样式污染的解决办法
lld20的博客
05-11 2609
关于vue项目中样式污染的解决办法有两种只不过第二种要在第一种的基础上使用 1.css方法 通过在style 中加上 <style scoped> 2.less 的用法 依赖一个插件 sass-loader 和第一个组合的用 2.1首先要下载相对于的插件 他有两个插件要同时使用 在终端输入 npm install sass-loader@"^10.2.1" --save npm install node-sass@"^4.14.1" --save 在style中直接使用
vue项目css中修改子组件样式又不会造成全局污染的方法
qq_40610279的博客
10-23 2019
vue项目css中修改子组件样式又不会造成全局污染的方法 我们在日常开发过程中，经常会遇到需要修改子组件样式的需求，这个时候我们通常会想到把样式写在不加scoped的style标签中： 但是使用了这种方法后，我们会发现从这个页面跳到另一个也使用了同样组件的页面后，另一个页面的样式会被同步修改，这样就不符合我们最初的预期了。 这个时候，我们又会想到另一个办法，就是在这个样式的外面包一层class，比如这个子组件有一个class为parent-style的div或别的容器，我们可以在这个class里面对子组件
Vue 组件间的样式冲突污染
08-29
本篇文章主要介绍了Vue 组件间的样式冲突污染，当多个样式出现时，就会导致样式冲突，本文介绍了具体解决方法
vue的路由映射问题及解决方案
01-19
今天在项目中遇到了一个问题，明明在Router文件夹下的路由js映射文件中，配置好了，如下： // 生日贺卡 { path: 'birthdayRemind', component: load('@/components/app/birthdayRemind/BirthdayRemind')} 然后我是...
详解Vue项目部署遇到的问题及解决方案
01-19
Vue-Router 有两种模式，默认是 hash 模式，另外一种是 history 模式。 hash：也就是地址栏里的 # 符号。比如 http://www.example/#/hello，hash 的值为 #/hello。特点：hash 虽然出现 URL 中，但不会被包含在 ...
Vue项目中跨域问题解决方案
01-19
方法 后台更改header 使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建） Jquery jsonp 后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-...
Vue开发中遇到的跨域问题及解决方法
10-15
在本篇文章里小编给大家整理的是关于Vue开发中遇到的跨域问题及解决方法，需要的朋友们可以学习下。
框架搭建内容合成的描述
04-19
框架搭建内容合成的描述
【Godot4自学手册】第三十八节给游戏添加音效
最新发布
04-19
【Godot4自学手册】第三十八节给游戏添加音效
vue项目常见问题及解决方法
09-05
Vue项目常见问题及解决方法包括但不限于以下几个方面： 1. 跨域问题：在Vue项目中，由于浏览器的同源策略限制，经常会遇到跨域问题。解决方法可以使用代理服务器来转发请求，或者在后端接口中设置允许跨域请求的头...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值