详解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字符编码函数区别分析
Jun 05 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
Vue组件中slot的用法
Jan 30 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
详解JS ES6编码规范
May 07 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
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
php生成微信红包数组的方法
2019/09/05 PHP
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
python logging类库使用例子
2014/11/22 Python
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
Python实现多线程抓取妹子图
2015/08/08 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
python django model联合主键的例子
2019/08/06 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
Python enumerate内置库用法解析
2020/02/24 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
python开发一款翻译工具
2020/10/10 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
HTML5应用之文件上传
2016/12/30 HTML / CSS
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
给上级领导的感谢信
2015/01/22 职场文书
高老头读书笔记
2015/06/30 职场文书
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android