vue less 样式穿透写法(个人实战)

刚开始,我网上一直找,搞不懂,可能我的方法有问题,所以写下,以swiper  来做例子

1. html 数据结构

<template>
  <div class="slite-box" v-show="show" @click="handleClick">
    <div v-swiper:mySwiper="swiperOption">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img
            class="swiper-img"
            src="//img1.qunarzz.com/sight/p0/2012/34/34ff324ece5d9537a3.img.jpg_600x330_a7b8fbf5.jpg"
          />
        </div>
      </div>
      <div class="swiper-pagination move-down"></div>
    </div>
  </div>
</template>

2.例如需要修改swiper 某项

vue less 样式穿透写法(个人实战)

3. 样式穿透 使用 /deep/

<style lang='less' scoped>
.slite-box /deep/ .swiper-container{
  position: static;
}        //看一里的结构,.slite-box 是最外层的,不一定是要最外层,和类选择器一样,.swiper-container,想改的类
</style>

4.成功改变样式

vue less 样式穿透写法(个人实战)

 

上一篇:Android 广播


下一篇:vue-awesome-swiper重新渲染时,页面不能拖拽问题