详解Vue中CSS样式穿透问题

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）如下图所示：

编译的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，如下图所示：

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

4. 总结

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

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

赞 (0)

相关推荐

  • 详解Vue中的scoped及穿透方法

    scoped的由来 css一直有个令人困扰的作用域问题:即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的.为了避免css样式之间的污染,vue中引入了scoped这个概念. 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件.通过设置该属性,使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. 但是这

  • vue 弹框产生的滚动穿透问题的解决

    最近开发过程中遇到一些小问题(似乎问题总是那么多),但一直没什么时间去优化与解决.程序员不能被业务绑架,有时间还是花点在代码,开始这次的vue尝试吧. 首先定义一个全局样式: .noscroll{ position: fixed; left: 0; top: 0; width: 100%; } 创建一个dom.js文件,定义几个方法: export function hasClass(el, className) { let reg = new RegExp('(^|\\s)' + classN

  • vue解决弹出蒙层滑动穿透问题的方法

    最近开发过程中遇到一些小问题(似乎问题总是那么多),但一直没什么时间去优化与解决.程序员不能被业务绑架,有时间还是花点在代码上

  • Vue中的scoped实现原理及穿透方法

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素.通过该属性,可以使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. scoped的实现原理 vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码: <style scoped> .examp

  • 详解Vue中CSS样式穿透问题

    详解Vue中CSS样式穿透问题

    1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将webpack顺利从3升级到4(项目结构 webpack+vue+vue-store+vue-router+vant+less).相信好多做TOB的开发朋友都会选择顺手组件库.组件库内置了很多样式,方便了我们开发者,同时又因高度封装,有时也会给我们带来一点点困扰.比如,在使用vant组件库中的环形进度条时,查看官方文档,有

  • 详解vue 中 scoped 样式作用域的规则

    哈喽!大家好!我是木瓜太香,今天我们来聊一个 vue 的样式作用域的问题,通常我们开发项目的时候是要在 style 上加上 scoped 来起到规定组件作用域的效果的,所以了解他们的规则也是很有必要的,可以让你更清晰的了解你的项目样式是怎么运作的. 先来说说实现方式 vue中的样式作用域是通过属性选择器来实现的,例如同样一个类名,我们是通过 .类名[属性名] 来做区分的,我们这里主要是要搞清楚这里的属性名是怎么分配的. 样式作用域规则 接下来我们分情况来说一下样式作用域: 对于有样式作用域的组件

  • 详解vue中使用transition和animation的实例代码

    以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的.最近做活动页面,要求页面比较酷炫,终于有机会认真了解了. transition:英文过渡的意思,作用是过渡效果:animation:英文活泼.生气.激励,动画片就是animation film,作用是动画效果. transition在w3school的实例: //将鼠标悬停在一个 div 元素上,逐步改变表格的宽度从 100px 到 300px: div { width:10

  • 详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法

    最近在项目中实现在循环出来的图片中当鼠标移入隐藏当前图片显示另一张图片的需求时碰到了一个小问题.就是当使用@mouseenter 和@mouseleave事件来实现这个需求时却发现鼠标移入后图片出现闪烁现象. 重点:事件写到父元素上才行!!! 0.0 下面写下我的实现方法和实现效果 样式代码: <div class="imgs" v-for="(item,index) in exampleUrl" :key = index @mouseenter ="

  • 详解vue中v-model和v-bind绑定数据的异同

    vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data

  • 详解Vue中的MVVM原理和实现方法

    下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家可以学习到: 1.Vue数据双向绑定核心代码模块以及实现原理 2.订阅者-发布者模式是如何做到让数据驱动视图.视图驱动数据再驱动视图 3.如何对元素节点上的指令进行解析并且关联订阅者实现视图更新 一.思路整理 实现的流程图: 我们要实现一个类MVVM简单版本的Vue框架,就需要实现一下几点: 1.实现一个数据监听Observer,对数据对象的所有属性进行监听,数据发生变化可以获取到最新值通知订阅者. 2.实现一个解析器Compi

  • 详解vue中v-on事件监听指令的基本用法

    一.本节说明 我们在开发过程中经常需要监听用户的输入,比如:用户的点击事件.拖拽事件.键盘事件等等.这就需要用到我们下面要学习的内容v-on指令. 我们通过一个简单的计数器的例子,来讲解v-on指令的使用. 二. 怎么做 定义数据counter,用于表示计数器数字,初始值设置为0 v-on:click 表示当发生点击事件的时候,触发等号里面的表达式或者函数 表达式counter++和counter--分别实现计数器数值的加1和减1操作 语法糖:我们可以将v-on:click简写为@click 三

  • 详解Vue中Axios封装API接口的思路及方法

    一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 在一个项目中我们如果要使用很多接口的话,总不能在每个页面都写满了.get()或者.post()吧?所以我们就要自己手动封装一个全局的Axios网络模块,这样的话就既方便也会使代码量不那么冗余. 安装 > npm install axios //这个

  • 详解VUE中的插值( Interpolation)语法

    背景分析 在传统的html页面中我们可以定义变量吗?当然不可以,那我们假如希望通过变量的方式实现页面内容的数据操作也是不可以的.当然我们可以在服务端通过定义html标签库方式,然后以html作为模板,在服务端解析也可以实现,但这样必须通过服务端进行处理,才可以做到,能不能通过一种技术直接在客户端html页面中实现呢? VUE中的插值语法 这种语法是为了在html中添加变量,借助变量方式与js程序中的变量值进行同步,进而简化代码编写.其基本语法为: <HTML元素>{{变量或js表达式}}<

  • 详解vue中在父组件点击按钮触发子组件的事件

    我把这个实例分为几个步骤解读: 1.父组件的button元素绑定click事件,该事件指向notify方法 2.给子组件注册一个ref="child" 3.父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg  4.子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中 父组件 <template> <div id="app&qu

随机推荐