解决使用vue-awesome-swiper组件分页器样式设置失效问题

• 2019 年 10 月 4 日
• 筆記

解决使用vue-awesome-swiper组件分页器pagination样式设置失效问题

解决方案：

 给父标签设置一个id，例如父标签id="parent"，在sass/less中使用/deep/样式穿透，例：

#parent /deep/ .swiper-pagination-bullet{        background-color: 'red';  }

在stulys中使用：>>>实现样式穿透

#parent >>> .swiper-pagination-bullet-active {       border-radius: 'unset';  }

vue穿透详解：

在一次这样的需求中，需要实现滑倒底部时自动请求数据，需要动态创建节点然后追加到某元素中，这期间遇到的问题就是在动态创建节点后，类名也已经加上了 ，但是样式就是没有生效，最后发现原因的产生竟然是<style scoped></style>中scoped属性，该属性的作用是用来绑定当前样式不被污染。

这时就需要通过 >>> 穿透scoped

stylus的样式穿透 使用>>>。iview中需要在组件上使用i-class声明第三方组件类名

<style scoped>      外层 >>> 第三方组件类名{          样式      }  </style>

有些Sass 、Less之类的预处理器无法正确解析>>>。可以使用/deep/操作符( >>> 的别名)

<style lang="sass" scoped>  /deep/  第三方组件类名 {        样式    }    </style>

实例：

<template>  	<input i-class="ivu-input">  </template>  // 样式  .num-input {      width: 90px;      margin-top: 15px;      >>> .ivu-input {        text-align: center!important;      }  }  // Less || Sass  .num-input {      width: 90px;      margin-top: 15px;      /deep/ .ivu-input {        text-align: center!important;      }  }

关于vue项目中使用 vue-awesome-swiper组件 的详细博客：https://segmentfault.com/a/1190000014609379