在使用VUE做项目的时候,随着页面的增加,重复调用同一种组件,造成的样式污染问题不容小视。
查找了相关的资料和结合实际项目,我遇到的样式污染问题主要由以下两个原因造成:
- 使用了同一种组件,却在CSS中对该组件设置了不同的样式;
- 子元素的根元素会继承父元素的 ScopeId;
目前可以的解决方案是:
1.在写每一个.Vue页面时,一开始就将style设置为scoped(注意:scoped原理就是在css以及html上加一个唯一标识,然后根据权重来实现目的。scoped的作用是使得.Vue中的样式不影响其他的.Vue组件,而不是使Vue组件样式不受外界影响)。但是scoped要慎用,在需要修改公共组建(第三方库或者项目中定制的组件)的样式时,scoped会造成很多麻烦。这种情况可以使用两个style样式,将修改公共组建的样式放在< style>中,其余的样式放在< style scoped>中,具体原因可以参考这篇文章.vue文件加scoped 样式不起作用的解决方法
2.为每一个组件的根元素提供一个特殊的样式名,当一个组件被重复使用的时候,样式很容易重叠,所以每次被使用的时候写一个特殊的class样式名,结合我自身的项目,在同一个.Vue中需要展示三张表格,但是表格的颜色样式互不相同,如果我给这三个表格都设置class=“table”,那么即使在style中设置不同的样式,最终显示还是一样,但是根据特殊的命名方法,分别把class设为sosdatatable,aisdatatable,emergencytasktable,再分别设置样式,就不会相互干扰了。这种特殊的命名方式适合区分重复调用的element-ui自带的组件。例如我使用element-ui自身的分页控件。
对于sos表格,在template中设置分页的div,对于element-ui自带的el-pagination控件,设置一个特殊的class=“page-sosdatatable-cyt”
然后再css样式中直接用class名(.page-sosdatatable-cyt)+属性名称(.el-pager li)设置分页的背景颜色为#272e38
对于emergencytask表格,也是在template中对el-pagination控件设置一个不同于其他表格分页的class=“page-emergencytasktable-cyt”
在CSS样式中用.page-emergencytasktable-cyt .el-pager li设置背景颜色为#172d37
对两张表格的分页控件设置了不同的class,在样式中直接用class名+属性名称来设置不同的背景颜色,这样就避免了样式的重叠和干扰,效果如下: