vue-awesome-swiper的左右切换按钮功能失效问题处理

1. 问题描述

      在使用vue-asesome-swiper时，总是出现各种各样的问题，这次出现的问题是，左右切换按钮左右插槽的方式引用时，出现的功能失效的问题。

      引用的方式如下：

// html
<div class="box">
  <swiper ref="interSwiper" :options="interSwiperOptions">
    <swiper-slide v-for="(item, index) in data" :key="index">
      <div>
        {{item.name}}
      </div>
    </swiper-slide>
  </swiper>
  <div class="swiper-button-next" slot="button-next"></div>
  <div class="swiper-button-prev" slot="button-prev"></div>
</div>

// vue
data () {
  return {
    interSwiperOptions: {
      slidesPerView: 3,
      loop: false,
      autoplay: false,
      allowTouchMove: true,
      observer: true,
      observeParents: true,
      spaceBetween: 0,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        disabledClass: 'my-button-disabled',
      }  
    },
  }
}

      具体的样式就不写了。出现的问题，引入了左右切换按钮，并且正常显示默认样式，但点击功能失效，并且navigation中的disabledClass也失效了。

      具体导致失效的原因，还没有找到，如果有知道此原因的朋友们，可以留言告诉我，谢谢！虽然没有找到具体原因，但是，我对此问题进行了处理，能够正常使用。

2. 关于点击事件失效的解决办法

     在引用时，通过自己给左右切换按钮进行绑定点击事件，实现原本正常使用的功能，具体操作如下：

// html
<div class="swiper-button-next" slot="button-next" @click='swiperNext'></div>
<div class="swiper-button-prev" slot="button-prev" @click='swiperPrev'></div>

// vue
methods: {
  swiperNext() {
    this.$refs.interSwiper.$swiper.slideNext()
  },
  swiperPrev() {
    this.$refs.interSwiper.$swiper.slidePrev()
  },
}

3. 关于disabledClass功能失效的处理

      这个问题通过swiper的on监听回调时事件进行处理，对左右切换按钮进行动态绑定和解绑 ' my-button-disabled ' 类名。具体操作方案通过原生js书写。

// vue data
   interSwiperOptions: {
        slidesPerView: 3,
        loop: false,
        autoplay: false,
        allowTouchMove: true,
        observer: true,
        observeParents: true,
        spaceBetween: 0,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
          disabledClass: 'my-button-disabled',
        },
        on:{
          slideChangeTransitionEnd: function () { // 监听slide切换结束后
            let boxs = Math.ceil(this.slides.length/3) // 确定有几屏
            let swiper2 = document.getElementsByClassName('box')[0]
            let nextB = swiper2.getElementsByClassName('swiper-button-next')
            let prevB = swiper2.getElementsByClassName('swiper-button-prev')
            nextB[0].setAttribute('class', 'swiper-button-next')
            prevB[0].setAttribute('class', 'swiper-button-prev')
            if (this.activeIndex === (boxs-1)) { // 切换结束后，如果为最后一屏next按钮置灰
              nextB[0].setAttribute('class', 'swiper-button-next my-button-disabled')
            } 
            if (this.activeIndex === 0) { // 切换结束后，如果为第一屏next按钮置灰
              prevB[0].setAttribute('class', 'swiper-button-prev my-button-disabled')
            } 
          },
          init: function(){ //监听swiper初始化时，对左右按钮样式进行处理
            let boxs = Math.ceil(this.slides.length/3)
            let swiper2 = document.getElementsByClassName('box')[0]
            let nextB = swiper2.getElementsByClassName('swiper-button-next')
            let prevB = swiper2.getElementsByClassName('swiper-button-prev')
            nextB[0].setAttribute('class', 'swiper-button-next')
            // 初始化时，prev按钮是不可点击的，应该置灰
            prevB[0].setAttribute('class', 'swiper-button-prev my-button-disabled')
            if (boxs === 1) { // 如果只有一屏，next按钮也要置灰
              nextB[0].setAttribute('class', 'swiper-button-next my-button-disabled')
            }
          }, 
        },
      }

/* 置灰按钮的样式 */
.my-button-disabled {
  opacity: 0.5;
}