以directive的方式进行swiper轮播效果

在我们的项目中，轮播图效果一般会调用多次，所以swiper代码的复用性会很高，此时，我们可以将swiper写成一个v-swiper指令，在我们需要多次调用swiper的时候，只需要在页面结构上添加v-swiper标签就可以了

首先，我们依旧是通过在created钩子函数中添加一个延时器，将实例中数据更改成为模拟后端传过来数据的方式，来进行实例化Vue

    new Vue({
        el:"#app",
        data:{
            dataList:[]
        },
        created(){
            setTimeout(()=>{
                this.dataList = [1,2,3]
            },2000)
        }
    })

此时，我们可以通过自定义指令对象提供的钩子函数，比如inserted钩子函数来进行实例化

insert()钩子函数的作用是被绑定元素插入父节点时使用

    Vue.directive('swiper',{
        inserted(){
                new Swiper('.swiper-container',{
                    loop:true,
                    pagination:{
                        el:".swiper-pagination"
                    }
                })
        }
    })

经过我们对页面结构类名为swiper-slide的标签进行遍历过后

        <div
            class="swiper-slide"
            v-for="(data,index) in dataList"
            :key="index"
            v-swiper
        >{{data}}</div>

我们会发现小圆点不能用了,这是为什么呢？

因为我们在遍历的时候，相当于遍历的每一个都添加了v-swiper自定义指令，也就等于是我们还是对swiper进行了多次实例，那我们应该怎么解决

答案显而易见，我们可以利用自定义指令对象提供的钩子函数中可以传入的属性来解决这个问题

比如binding属性，我们可以将一个对象赋给v-swiper，然后将index和数组作为对象的属性，此时我们可以通过binding.value来拿到v-swiper后面的属性值所绑定的值，就可以利用if判断来只给最后一个swiper-slide添加v-swiper，再通过给v-swiper:+我们的类名的方式，来通过binding.arg的方式来拿到我们所传入的具体是哪个轮播图页面结构，就可以实现一个swiper轮播图效果的自定义指令封装效果了

    Vue.directive('swiper',{
        inserted(el,binding){
            //我们可以通过binding来拿到我们传过来的index值和总数组，利用传过来的值，只给最后一个添加v-swiperr
            if(binding.value.index === binding.value.dataList.length-1){
                new Swiper('.'+binding.arg,{
                    loop:true,
                    pagination:{
                        el:".swiper-pagination"
                    }
                })
            }
        }
    })

以上可能会有所出入，若发现，希望能够及时指出，定加以改正，互相学习