Vue中使用Swiper方法小记

背景

前段时间在使用Swiper的时候总是出现错误，在网上查阅了各种资料发现目前Swiper6在Vue中使用不尽如人意，故分享一点自我经验

安装Swiper

当前使用的是Swiper5.X版本

npm install swiper@5.3.6 --save
npm install swiper vue-awesome-swiper --save

vue文件中使用

<template>
  <swiper :options="swiperOption" ref="mySwiper">
	<swiper-slide>1</swiper-slide>
	<swiper-slide>2</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";

export default {
  data () {
    return {
      swiperOption: {
      // API
        pagination: {
          el: '.swiper-pagination',
          clickable :true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        loop: true,
        autoplay: {
          disableOnInteraction: false,
          delay: 4000,
        },
      }
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
    // 提供一个可操作的swiper对象
  },
  components: {
    Swiper,
    SwiperSlide
  }
}
</script>