vue样式穿透？

1、使用场景举例：比如我们在vue项目中使用了vant组件中的环形进度条时，未提供修改文字颜色的属性。发现，去除scoped可以，但会影响其它组件的样式。

环形进度条的文字颜色修改案例：

1、修改前：

<van-circle
      v-model:current-rate="currentRate"
      layer-color="#ccc"
      rate="80"
      speed="10"
      :text="currentRate + '%'"
/>

　<style lang="less" scoped></style>

F12审查元素结果如下：在含有scoped的情况下，会出现自定义属性

 

 

 2、修改后：

（1）直接找到类名修改是没用的，因为van-circle的标签元素含有data-xxx自定义属性。所以下边写法有误。。。

<style lang="less" scoped>
.login {.van-circle__text {
    color: #ff0000;
  }
}

（2）通过样式穿透

样式穿透有三个方法：

　　>>> ：在less中使用（不推荐）

       /deep/ ：在less中使用

       ::v-deep ：在scss中使用

<style lang="less" scoped>
.login {
  font-size: 0.16rem;
  .van-circle/deep/.van-circle__text {
    color: #ff0000;
  }
}

结果：字体颜色改变了。

 

标签：vue,van,样式,deep,穿透,修改,circle
来源： https://www.cnblogs.com/heisetianshi/p/16022305.html