详解Vue中CSS样式穿透问题 - 行业资讯 - 肥雀云

<强>

在做两款H5的软件项目,前期采用微信官方推荐的weui组件库。后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库。同时将webpack顺利从升3级到4(项目结构webpack + vue + vue-store + vue-router + vant +少)。相信好多做TOB的开发朋友都会选择顺手组件库。组件库内置了很多样式、方便了我们开发者,同时又因高度封装,有时也会给我们带来一点点困扰。比如,在使用vant组件库中的环形进度条时,查看官方文档,有改变进度条颜色,有改变轨道颜色,也有改变填充颜色。就是没有改变显示文字颜色的凑。巧的是,我们的需求就是要改变文字颜色。怎么办呢?写个css不就好了么。

为了说明情况,我为本文专门配合了一个测试演示。假如您现在也已经初始化好了一个Vue项目,并引入了我们需要的vant组件库。接下来,我们在组件文件夹中新建一个<代码> CssScope.vue 的单文件组件。基本代码如下:

　　　　　　& lt; template> 　　& lt; div> & lt; van-circle v模型=癱urrentRate”:率=" 90 ":速度=" 100 ":文本=" text "/祝辞& lt;/div> 　　& lt;/template> 　　& lt;风格lang=吧佟眘coped> 　　& lt;/style> 　　& lt; script>……& lt;/script> 　　　　

编译运行,我们在浏览器就会看到一个进度为90%的环形进度条。当然显示文字90%显示是黑色,现在我们就来改变它。

最初我们想的到,文字颜色颜色是可以从父级继承的,所以我们在风格标签中写下如下css样式:

　　　　　　& lt;风格lang=吧佟眘coped> 　　.van-circle{颜色:蓝色;} 　　& lt;/style> 　　　　

回到浏览器,文字颜色没变。通过Chrome的开者工具,找到我们的圆形进度条。才发现,原来,这个组件内部是一个svg和div标签组成,svg用于显示我们图形,div用于显示文字,并且在这个div上存在一个类为van-circle__text。根据css优先级,我们刚在父级设置的字体颜色无效。找到原因,那就好办了。我们需要在风格标签中定义这个类选择器,并设置它字体颜色为蓝色。于是我们删除刚写的样式,改写为如下:

　　　　　　& lt;风格lang=吧佟眘coped> 　　.van-circle { 　　.van-circle__text {olor:蓝色;} 　　} 　　& lt;/style> 　　　　

这下应该可以了,可回到浏览器,效果依旧。黑色,还是黑色。此时,回到chrome,在开发者工具找到我们的元素。仔细的你才发现,显示文字的标签和它的父级好像不一样,少个data-v-xxx的属性。也许是风格的范围搞的鬼,那我们就去掉。回到浏览器,文字颜色居然改变了。欢喜之余,总感觉哪里不对吗?我们得查查这个水鬼范围

<强>

我们的项目采用少作为CSS预处理语言。在组件中习惯于使用一个带有范围属性的风格标签,范围属性的效果,就是在编译打包后,在当前组件能一眼看到的标签中统一添加一个随机的属性(下图数据- v - 97 a9747e)如下图所示:

详解Vue中CSS样式穿透问题