vue——可复用swiper以及scoped样式穿透（可以不受scoped的限制来修改样式）

参考： https://blog.csdn.net/dwb123456123456/article/details/82701740
https://blog.csdn.net/u014027876/article/details/81663080
https://www.jianshu.com/p/8601ccf91225

1. 安装

   npm install  vue-awesome-swiper
   
   cnpm inatall vue-awesome-swiper

    

2. main.js中引入

   import vueSwiper from 'vue-awesome-swiper'

    

3. component - ShopSlide.vue 中引入

   import { swiper, swiperSlider } from 'vue-awesome-swiper'
   
   import 'swiper/dist/css/swiper.css'
   
   components: {
   
   　　swiper,
   
   　　swiperSlider
   
   }

    

4. ShopSlide.vue代码

   <template>
   
   　　<swiper :options="swiperOption" ref="mySwiper" v-bind:class="ifSlide?'':'swiper-no-swiping'">
   
   　　    <!-- slides -->
   
   　　    <swiper-slide v-for="(picitem,index) in shopImgsList" :key="index">
   
   　　　    　<img :src="picitem.imgpath" alt="" style="display:inline-block;width:100%;vertical-align:middle;">
   
   　　    </swiper-slide>
   
   　　    <div class="swiper-scrollbar" slot="scrollbar"></div>
   
          <div class="swiper-button-prev" slot="button-prev"></div>
   
          <div class="swiper-button-next" slot="button-next"></div>
   
          <div class="swiper-pagination pageIcon" slot="pagination"></div>
   
       </swiper>
   
   </template>
   
   <script>
   
   import { swiper, swiperSlider } from 'vue-awesome-swiper'
   
   import 'swiper/dist/css/swiper.css'
   
   export default {
   
       name: 'ShopSlide',
   
       data() {
   
           return {
   
               swiperOption: {
   
                   notNextTick: true,
   
                   loop: true,
   
                   autoplay: 3000,
   
                   speed: 800,
   
                   direction: 'horizontal',
   
                   grabCursor: true,
   
                   setWrapperSize: true,
   
                   autoHeight: true,
   
                   autoplayDisableOnInteraction: false,
   
                   // 如果需要分页符
   
                   pagination: '.swiper-pagination',
   
                   // 如果需要前进后退按钮
   
                   nextButton: '.swiper-button-next',
   
                   prevButton: '.swiper-button-prev',
   
                   // 如果需要滚动条
   
                   scrollbar: '.swiper-scrollbar',
   
                   paginationClickable: true,
   
                   mousewheelControl: true,
   
                   observeParents: true,
   
                   debugger: true
   
               },
   
               ImgsList: [],
   
               ifSlide: true
   
           }
   
   },
   
   props: {
   
       shopImgsList: {
   
           type: Array,
   
           required: true
   
       }
   
   },
   
   components: {
   
       swiper,
   
       swiperSlider
   
   },
   
   watch: {
   
       shopImgsList: function(newVal, oldVal) {
   
           this.ImgsList = newVal;
   
           if(this.ImgsList.length == 1) {
   
               this.swiperOption.autoplay = false;
   
               this.ifSlide = false;
   
           }
   
      }
   
   }
   
   }
   
   </script>
   
   <style>
   
   .swiper-wrapper {
   
   font-size: 0;
   
   }
   
   .swiper-pagination.pageIcon {
   
   width: 3.75rem;
   
   height: .2rem;
   
   position: absolute;
   
   bottom: .1rem !important;
   
   text-align: center;
   
   line-height: .2rem;
   
   box-sizing: border-box;
   
   padding: 0 .3rem;
   
   font-size: 0;
   
   }
   
   .pageIcon span {
   
   background: rgba(0, 0, 0, .2);
   
   }
   
   .swiper-pagination-bullet-active {
   
   background-color: #ff7035 !important;
   
   opacity: 1;
   
   }
   
   .swiper-button-next {
   
   background-color:
   
   }
   
   .swiper-slide {
   
   width: 100%;
   
   height: 100% !important;
   
   line-height: 3.75rem !important;
   
   }
   
   .swiper-wrapper {
   
   height: 100% !important;
   
   line-height: 3.75rem !important;
   
   background-color: #fff;
   
   }
   
   .swiper-container-autoheight,
   
   .swiper-container-autoheight .swiper-slide {
   
   height: 100%;
   
   width: 100%;
   
   overflow: hidden;
   
   }
   
   </style>

    

5. 其他组件内引用ShopSlide.vue

   <template>
   
       <div class="shopImg">
   
           <shop-slide :shopImgsList="shopImgsList"></shop-slide>
   
       </div>
   
   </template>
   
   <script>
   
   import ShopSlide from './ShopSlide.vue'
   
   export default{
   
       data( ) {
   
           return{
   
               shopImgList : [ { imgpath: '1.jpg '} , { imgpath: '2.jpg '}]
   
           } 
   
       },
   
       components: {
   
           ShopSlide
   
       }
   
   }
   
   <script>

    

6. 样式穿透

   <style scoped>
   
   .shopImg >>> .swiper-pagination-bullet-active{   
   
   background:#fff 
   
    }
   
   </style>

   或

   <style lang="stylus" scoped>  //stylus是一种css预编译语言,支持省略花括号，支持省略分号，代码整洁，支持引入，并且支持语法内函数
   
   .shopImg >>> .swiper-pagination-bullet-active background:#fff  
   
   </style>