付珍的踩坑

vue-awesome-swiper 的左右箭头与swiper的on属性的点击事件冲突的解决方法

当点击左右箭头时，swiper轮播图应该出现切换效果，但同时也会触发图片上的跳转事件，隐藏我们只需要判断事件源点击的是不是左右箭头就行了。

<template>
  <swiper class="swiper" :options="swiperOption" >
    <swiper-slide v-for="item in banners" :key="item.id">
        <img :src="item.bg_image" alt="">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
var vm = null
export default {
  name: 'Banner',
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      swiperOption: {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        autoplay: {
          stopOnLastSlide: true,
          disableOnInteraction: false
        },
        effect: 'fade',
        preventClicks: false,
        fadeEffect: {
          crossFade: true
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        on: {
          click: function (e) {
            const index = this.realIndex
            if (e.target.className !== 'swiper-button-next' && e.target.className !== 'swiper-button-prev') {
              vm.handclick(index)
            }
          }
        }
      },
      banners: []
    }
  },
  methods: {
    handclick (index) {
      window.location.href = this.banners[index].slide_link
    }
  },
  created () {
    vm = this
  }
}
</script>