封装的自定义指令v-swiper

//封装自定义指令v-swiper

Vue.directive("swiper",{

       inserted(el,binding,vnode){

//代表最后一个元素插入完毕了，再进行一次实例化操作就行了

             if(binding.value.current===binding.value.length-1){

                    new Swiper("."+binding.value.swiper,{//默认swiper执行3次，因为插入了3个swiper-slide的真实dom

                           ...binding.value.free,

                           pagination:{

                            el:".swiper-pagination"

                             }

                   })

             }

      }

})

//swiper组件

<div class="swiper-container" :class="cName">

         <div class="swiper-wrapper">

                  <slot></slot>

          </div>

</div>

<script>

import "swiper/css/swiper.min.css"

export default{

props:["cName"]

}

</script>

//使用

<Swiper cName="swiper">

               <div

                class=""swiper-slide"

                  v-for="(banner,index) in banners" :key="banner.bannerId"

                   v-swiper="{

                   current:index,

                  length:banners.length,

                  swiper:'swipe' 

                   }"

                >

                 <img :src="banner.imgUrl" alt="">

                 </div>

</Swiper>