vue-awesome-swiper 悬停效果实现

轮播实现鼠标悬停效果，实际上就是用 mouseover、mouseleave 两个事件去实现，但是关键在于这两个事件怎么使用才能达到理想的效果。

如果直接将 mouseover、mouseleave 事件绑定在 swiper 上面，就会出现一个问题： mouseover、mouseleave事件被触发的次数很偶然，比如刚进入页面，鼠标放在轮播图上面会触发悬停，但轮播图自动轮播后，事件将不再触发。如果上面滑动页面，经过轮播图时，偶尔也会触发一两次，ennn。。。这并不是我想要的效果。。。。最后想了一下，大概时 loop 循环之后，事件绑定的DOM发生了偏移，导致事件偶尔触发一次。

解决办法：

<div class="box" @mouseover="enter" @mouseleave="leave">
    <swiper —— ref="mySwiper" :options="swiperOption">
        <swiper-slide v-for="(item, index) in swiper" :key="index">
            Slide{{index+1}}+
        </swiper-slide>
    </swiper>
</div>

上面说了，直接将事件绑定在 swiper 上面，因为它的不稳定性，导致事件触发只能看缘分。 所以我这里给 swiper 添加了一个父盒子，将事件绑定在父盒子上面，只要鼠标经过 class=“box” 这一区域就会触发 mouseover 、mouseleave 事件了。
下面我们可以通过事件去控制 swiper 的悬停效果了。

data() {
    return {
        swiperOption: {
            autoplay: {
                delay: 2000,
                disableOnInteraction: false
            },
            loop: true
        },
        swiper: [1, 2, 3, 4]
    }  
},
methods: {
    enter() {
        this.$refs.mySwiper.swiper.autoplay.stop()
    },
    leave() {
        this.$refs.mySwiper.swiper.autoplay.start()
    }
}

• 需要注意的是，在配置 swiperOption 时，loop 为 true 的情况下，要在 swiper 标签上面添加 v-if=“swiper.length” ，确保 swiper 准备好之后再进行渲染，如果不添加会使一些配置信息失效。

如果我们的轮播图只有一张图，这个时候 loop 循环就有些奇怪了，看到一张图一直在转啊转。。。这里就需要简单的做一下处理，当 swiper 数组长度为 1 时，就将 swiperOption 中的 loop 只设为 false 就可以了。

data() {
    return {
        swiperOption: {
            autoplay: {
                delay: 2000,
                disableOnInteraction: false
            },
            loop: true
        },
        swiper: [1, 2, 3, 4]
    }  
},
mounted() {
    if(this.swiper.length > 1) {
        this.swiperOption.loop = true
    }else {
        this.swiperOption.loop = false
    }
},
methods: {
    enter() {
        this.$refs.mySwiper.swiper.autoplay.stop()
    },
    leave() {
        this.$refs.mySwiper.swiper.autoplay.start()
    }
}