swiper loop 为 true 的时候 click 事件失效问题

问题

项目中使用 swiper 时，设置 loop:true时，slides前后会clone若干个slide，从而形成一个环路，但是却不会复制绑定在dom上的click事件，导致复制的slides点击不会跳转。

解决思路：

不要将click事件绑定在dom上，而是在放在 on() 回调函数中调用

 <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(item, index) in imagesList" :key="index" class="is-hidden-desktop-only is-hidden-widescreen-only is-hidden-fullhd">
        <img :data-url="item.url" :src="item.photoMobie ? item.photoMobie : item.photo" alt="" class="is-clickable"/>
      </swiper-slide>

      <!-- 下一项 -->
      <div slot="button-next" class="swiper-button-next"></div>
      <!-- 上一项  -->
      <div slot="button-prev" class="swiper-button-prev"></div>
      <!-- 标页码 -->
      <div slot="pagination" class="swiper-pagination"></div>
    </swiper>

 data() {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        direction: this.$props.direction,
        autoplay: {
          delay: 3000,
          speed: 500,
          // 操作停止切换
          disableOninteraction: true,
        },
        loop: true,
        // 箭头配置
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        spaceBetween: 26,
        on: {
          click: (e) => {
           
            const url = e.target.getAttribute('data-url')
            if(url) {
              that.jump(url)
            }
          }
        }
      },
    };
  },

computed: {
    swiper() {
      return (this.$refs.mySwiper as any).$swiper;
    }
  },
 mounted() {
    this.swiper.autoplay!.start();
    that = this
  },
  methods: {
    jump(url){
      const winOpen = window.open(url, '_blank');
      if (!winOpen) {
        this.$notice.warning(this.$t('browserNotSupport') as string);
      }
    }
  },