坑
【样式修改失败】前几天开发需求,遇到一个坑,我无论怎么修改样式都无法完成 对公司内部的一个基础组件样式进行修改。经过排查,因为我在style标签上加入了scoped属性,于是我需要对scoped这个属性进行研究。
scoped作用
让.vue中的样式不影响其他.vue组件中的样式。
在vue组件中,为了使样式私有化(模块化),不对全局造成污染,在style标签上添加scoped属性,以表示它只属于当下的模块。
网络异常,图片无法展示
|
![点击并拖拽以移动](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
如图所示,我添加了scoped属性,dom和 css选择器后面都会添加一个不重复的data属性,如图中的:data-v-f29e1056。
所以,scoped属性会做以下两件事:
- 给HTML的DOM节点增加一个不重复的data属性。
- 在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器,对样式进行私有化。
于是我们会遇到两种情况:
- 在不使用scoped的组件中加入了使用了scoped的组件。
- 在使用了scoped属性的组件中加入了使用了scoped的组件。
在 不使用 scoped的组件中引用带scoped属性的组件
<template> <div class="son-warp"> <son class="son">text</son> </div> </template> ... <style scoped> .son-warp{ display:inline-block; } .son{ padding: 5px 10px; font-size: 12px; border-raduis: 2px; } </style>
//father.vue <template> <div class="father"> <p class="title"></p> <son></son> </div> </template> ... <style> .father{ width: 200px; margin: 0 auto; } .father .son{ border-raduis: 5px; } </style>
最后的结果会是:
<div class="father"> <p class="title"></p> <!-- son上面定义的组件 --> <div data-v-f29e1056 class="son-warp"> <son data-v-f29e1056 class="son">text</son> </div> </div> /*son.vue渲染出来的css*/ .son-warp[data-v-f29e1056]{ display:inline-block; } .son[data-v-f29e1056]{ padding: 5px 10px; font-size: 12px; border-radus: 2px; } /*father.vue渲染出来的css*/ .father{ width: 200px; margin: 0 auto; } .father.son{ border-raduis: 5px; }
此时由于权重关系,我们只需要调整对应的权重就可以调出我们需要的样式。
在 使用 scoped的组件中引用带scoped属性的组件
在父组件的style标签加入scoped属性
//father.vue <template> <div class="father"> <p class="title"></p> <son></son> </div> </template> ... <style scoped> .father{ width: 200px; margin: 0 auto; } .father .son{ border-raduis: 5px; } </style>
浏览器渲染的结果是:
<div data-v-57bc25a0 class="father"> <p data-v-57bc25a0 class="title"></p> <!-- son是上面定义的组件 --> <div data-v-57bc25a0 data-v-f29e1056 class="son-warp"> <son data-v-f29e1056 class="son">text</son> </div> </div> /*son.vue渲染出来的css*/ .son-warp[data-v-f29e1056]{ display:inline-block; } .son[data-v-f29e1056]{ padding: 5px 10px; font-size: 12px; border-radus: 2px; } /*father.vue渲染出来的css*/ .father[data-v-57bc25a0]{ width: 200px; margin: 0 auto; } .father .son[data-v-57bc25a0]{ border-raduis: 5px; }
于是我们可以发现一个问题就是.father .son末尾的标记是father的标记,找不到对应的dom节点,于是我们设置样式就失效了。
网络异常,图片无法展示
|
![点击并拖拽以移动](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
解决方法
- 引入样式
- 再写一个不加scoped的style(最好同时用BEM css命名规范 等方式去限定style影响范围)