如何销毁 VueJS 的 Swiper 滑块

Question

我需要销毁 Swiper 滑块。
此代码初始化滑块

<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper';

  export default {
    components: {
      swiper,
      swiperSlide,
    },
    data() {
      return {
        swiperOption: {
          autoplay: false,
          spaceBetween: 20,
          pagination: '.swiper-pagination',
          paginationClickable: true,
        },
      };
    },
  };
</script>

如果窗口宽度发生变化，如何销毁滑块？
谢谢！

Answer 1

您可以在resize 上添加eventListner，如下所示，destroySwiper 可以是处理您如何销毁滑动滑块的逻辑的方法：

ready: function () {
  window.addEventListener('resize', this.destroySwiper)
},
beforeDestroy: function () {
  window.removeEventListener('resize', this.destroySwiper)
}