详解Vue中CSS样式穿透问题


Posted in Javascript onSeptember 12, 2019

1. 问题由来

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

2. 编写样式

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

<template>
<div><van-circle v-model="currentRate" :rate="90" :speed="100" :text="text" /></div>
</template>
<style lang="less" scoped>
</style>
<script>...</script>

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

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

<style lang="less" scoped>
.van-circle{color:blue;}
</style>

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

<style lang="less" scoped>
.van-circle{
  .van-circle__text{olor:blue;}
}
</style>

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

3. Style中的 Scoped神奇效果

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

详解Vue中CSS样式穿透问题

编译的css也会对于加上那个随机属性

详解Vue中CSS样式穿透问题

我们再在回到解决问题的那里,我们去掉了scoped后,Style标签里边的样式变成全局的了,这可不是我们想要的结果。不生效的原因,通过以上两图,已经一目了然。我们得穿透一下。怎么办?找文档?记得在vue-loader中找。

4. 深度作用选择器

从官方文档了解到,我们所谓的穿透,官方叫做深度选择器。怎么用的呢 ?就是在我们想穿透的选择器前边添加 >>> 或者 /deep/ 或者 ::v-deep。官方还说>>>可能存在问题,建议用后两者,我们用的less,就选择 /deep/ 好了,于是我们加回刚在style中删除的scoped属性,并修改为如下代码:

<style lang="less" scoped>
.van-circle {
 /deep/ .van-circle__text {
  color: blue;
 }
}
</style>

回到浏览器,颜色改变,大功告成。不过,我们还是得仔细检查检查,再次找到生成的css,如下图所示:

详解Vue中CSS样式穿透问题

对,没毛病,是我们要的结果。

4. 总结

写代码,查问题,得找对路径。用别人的东西,就多看看对应官方文档。

以上所述是小编给大家介绍的Vue中CSS样式穿透问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS解决url传值出现中文乱码的另类办法
Apr 08 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
js new Date()实例测试
Oct 31 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 #Javascript
微信小程序之 catalog 切换实现解析
Sep 12 #Javascript
layui实现checkbox的目录树tree的例子
Sep 12 #Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 #Javascript
使用flow来规范javascript的变量类型
Sep 12 #Javascript
LayUI数据接口返回实体封装的例子
Sep 12 #Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 #Javascript
You might like
php面向对象全攻略 (七) 继承性
2009/09/30 PHP
php调用mysql数据 dbclass类
2011/05/07 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
Python shutil模块用法实例分析
2019/10/02 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
六十岁生日答谢词
2014/01/10 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
假面舞会策划方案
2014/05/29 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
见习报告格式范文
2014/11/08 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
国王的演讲观后感
2015/06/03 职场文书
周一给客户的问候语
2015/11/10 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js