vue-awesome-swiper之点击事件

当 swiper 开启 loop 属性实现循环轮播，同时用 vue 的事件绑定语法为每个轮播页绑定事件，当轮播到特定的页面时绑定的事件无法被正常监听。

原因：Swiper 是通过在实际轮播页前后复制若干个页面来实现 loop（首尾相连循环滚动）效果的，因为虽然复制了轮播页元素但 vue 所绑定的事件处理器却没有被复制。

解决方案：Swiper.js 本身提供了一套事件绑定机制，只需要把原代码里 vue 指定绑定的事件监听器通过 Swiper 初始选项中绑定就好了。调整后的代码如下：

data() {
    return {
      swiperOption: {
        loop: true, // 循环
        on: {
          click: (e) => {
            // 点击小图, 大图对应切换
            const index = this.pngListNoLabel.findIndex((i) => i.imgSrc === e.target.attributes.src.nodeValue);
            this.swiper.realIndex = index;
            this.swiper.activeIndex = index + 5;
            this.swiper.slideTo(index + 5);
            this.$emit('setBigIndex', index);
          },
        },
      },
    };
  },