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

原创

生南星

修改于 2019-09-17 10:46:44

4.5K0

修改于 2019-09-17 10:46:44

文章被收录于专栏：生南星

解决使用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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js