1.问题的根源
我正在做两个H5 APP项目，前期使用的是陌陌官方推荐的weui组件库。 后来由于疗效不理想，缺乏丰富的组件，项目完成后，所有升级均采用了有赞开发的vant组件库。 同时css样式大全，webpack也成功从3升级到4（项目结构webpack+vue+vue-store+vue-router+vant+less）。 相信很多做TOB开发的同学都会选择组件库。 组件库有很多外部样式，方便了我们开发人员的使用，同时，由于封装程度较高，有时也会给我们带来一点点困惑。 比如使用vant组件库中的圆形进度条时，查看官方文档更改进度条的颜色、更改轨道的颜色、更改填充颜色。 它只是不会改变显示文本的颜色。 恰好我们的需求是改变文本颜色。 怎么做？ 写个css不是很好吗？
2. 编译样式
为了说明情况，本文特意配合了一个测试demo。 如果你已经初始化了一个Vue项目，并引入了我们需要的vant组件库。 然后，我们在 Components 文件夹中创建一个 CssScope.vue 的单文件组件。 基本代码如下：
<div><van-circle v-model="currentRate" :rate="90" :speed="100" :text="text" /></div>
</template>
<style lang="less" scoped>
</style>
...</script>
编译运行后，我们会在浏览器中看到一个进度条为90%的圆形进度条。 事实上，90%的显示文本都是红色显示的，现在我们要改变它。
起初我们以为文本颜色color可以从父级继承，所以我们在Style标签中写了如下的css样式：
<style lang="less" scoped>
.van-circle{color:blue;}
</style>
返回浏览器，文字颜色没有改变。 通过Chrome的开发者工具，找到我们的方形进度条。 原来这个组件内部是由svg和div标签组成的，svg是用来显示我们的图形的，div是用来显示文本的。 这个 div 上有一个类 van-circle__text 。 通过css优先级，我们刚刚在父级中设置的字体颜色没有任何效果。 如果找到了原因，那就好办了。 我们需要在 Style 标签中定义这个类选择器，并将其字体颜色设置为黄色。 所以我们删除刚才写的样式，重写如下：
<style lang="less" scoped>
.van-circle{
.van-circle__text{olor:blue;}
}
</style>
现在应该可以了，但是你可以回到浏览器，效果还是有的。 红色，或者白色。 此时，回到chrome，在开发者工具中找到我们的元素。 如果你仔细观察，你会发现显示文本的标签似乎与其父标签不同，缺少 data-v-xxx 属性。 事实上，样式的范围造成了麻烦，所以我们将删除它。 返回浏览器，文字颜色已经改变。 当你高兴的时候，你总觉得有些不对劲吗？ 我们需要查找这个水鬼瞄准镜
3. Style中的范围魔法效果
我们的项目采用Less作为CSS预处理语言。 通常在组件中使用带有作用域属性的 Style 标签。 scoped属性的功效就是在当前组件编译打包后一眼就能看到的标签上统一添加一个随机属性（右图中的data-v-97a9747e），如右图所示：
编译后的CSS也会添加随机属性
让我们回到解决问题的地方。 当我们删除作用域后，Style 标签上的样式就变成了全局的。 这不是我们想要的结果。 不生效的原因通过上面两张图已经一目了然了。 我们必须渗透它。 怎么做？ 查找文档？ 记得在 vue-loader 中找到它。
4. 深度动作选择器
从官方文档中我们知道，我们所说的穿透，官方称之为深度选择器。 如何使用它？ 只需在我们想要穿透的选择器后面添加 >>> 或 /deep/ 或 ::v-deep 即可。 官方还说>>>可能有问题，建议使用后两者。 我们用less，所以选择/deep/，于是我们把样式中刚刚删除的scoped属性重新添加回来，改成下面的代码：
<style lang="less" scoped>
.van-circle {
/deep/ .van-circle__text {
color: blue;
}
}
</style>
返回浏览器，更改颜色css样式大全，就完成了。 不过我们还是要仔细检查，再次找到生成的css，如右图所示：
没问题，这就是我们想要的结果。
4. 总结
写代码、检查问题，就得找对路。 如果用了别人的东西，看对应的官方文档就可以了。
发表评论