vue模块私有组件中(scoped)设置全局样式
项目开发过程中,我们经常会用到scoped来使样式文件只适用于当前模块,scoped设计的初衷就是让样式变得不可修改,可以很好的实现私有化简单介绍一下scoped三条渲染规则dom:html的dom节点会有唯一的data属性(例如下方的data-v-5558831a)<div data-v-5558831a class="header"><div da...
·
项目开发过程中,我们经常会用到scoped来使样式文件只适用于当前模块,scoped设计的初衷就是让样式变得不可修改,可以很好的实现私有化
简单介绍一下scoped三条渲染规则
- dom:html的dom节点会有唯一的data属性(例如下方的data-v-5558831a)
-
<div data-v-5558831a class="header"> <div data-v-5558831a class="header-left"></div> <div data-v-5558831a class="header-input">输入城市景点,游玩主题</div> <div data-v-5558831a class="header-right">城市</div> </div>
- css:编译后的css选择器末尾会加一个当前组件的data属性来私有化样式
-
.header .header-left[data-v-5558831a] { width: 0.64rem; float: left; }
- 如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性
-
<div class="home"> <home-header></home-header> </div> 编译后: <div data-v-0c57a6db class="home"> <div data-v-5558831a data-v-0c57a6db class="header"> <div data-v-5558831a class="header-left"></div> <div data-v-5558831a class="header-input">输入城市景点,游玩主题</div> <div data-v-5558831a class="header-right">城市</div> </div> </div> 注:由此便可得知父组件scoped内样式无法修改子组件元素样式的原理了
样式穿透
适用范围:
- 父组件添加scoped之后,解决在父组件中无法修改子组件样式问题
- 对公共组件的样式实现微调
- 对设置了scoped的子组件里的元素进行控制
-
方法:
-
在scoped样式中设置样式穿透,使之不受scoped的限制
-
<style lang="stylus" scoped> .wrapper >>> .swiper-pagination-bullet-active background: #fff !important </style> // 注:样式穿透是vue-loader的特性 // 当lang = less or sass 时 解析不了">>>"符号,则使用 /deep/ .a /deep/ .b { /*样式*/ }
更多推荐
已为社区贡献10条内容
所有评论(0)