使用
deep scoped
可以实现对样式应用的修改,不必选择全局样式污染样式
1、常规使用
在 vue 项目的开发过程,使用了 ElementUI 组件且样式 style 使用了 scoped 属性,当想要修改组件样式,发现直接修改不了,需去掉 scoped 属性或者使用深度选择器才能修改成功。去掉scoped的话又会影响全局样式,针对这种情况,可以使用深度作用选择器(即样式穿透)
<style lang="scss" scoped>
.editor-slide-upload {
margin-bottom: 20px;
::v-deep .el-upload--picture-card {
width: 100%;
}
}
</style>
2、在v-html中使用深度选择器对其中的样式进行设定
// html
<div class="editor-content" v-html="content" />
// script
data() {
return {
content: `<div class="content">
<div class="title">传统的组件之间的共享数据方式</div>
<ul>
<li>父向子传值: v-bind</li>
<li>子向父传值:v-on</li>
<li>兄弟组件之间共享数据:EvenBus</li>
<li>$on 接受数据的那个组件</li>
<li>$on 接受数据的那个组件</li>
<li>$emit 发送数据的那个组件</li>
</ul>
</div>`,
};
},
// css
<style lang="scss" scoped>
.editor-content {
::v-deep .content {
.title {
font-size: 20px;
}
ul li {
font-size: 12px;
}
}
}
</style>
3、在字符串模板中编写的CSS样式可以使用深度选择器进行设定
// script
divStr = `
<div class="point" >
<div class="pointTop" >${item.name}</div>
<div class="pointBottom">
<div class="item"> <span>日处理量</span><span class="time">${item.dealNum} 吨</span>
</div>
<div class="item"> <span>污水处理率</span><span class="time">${item.dealRate}%</span></div>
</div>
</div>`;
// css
<style lang="scss" scoped>
.pollutionMap {
::v-deep {
.point {
}
}
</style>