狗万官网酒店 > 狗万官网下载 > 详解Vue外方CSS体制穿透问题_vue.js

详解Vue外方CSS体制穿透问题_vue.js

来源: 2019-09-16 09:51 我来投稿 参与评论
这篇文章主要介绍了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% (0)
 
 
0% (0)
机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
地名: 匿名?


  •