vue-awesome-swiper自动轮播+按钮切换

轮播组件使用注意事项，需安装vue-awesome-swiper和swiper

其中vue-awesome-swiper@3、swiper@4，否则会导致一些莫名的错误

第一步，安装插件

npm install --save-dev vue-awesome-swiper@3 swiper@4

第二步，在页面中按需引入

import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
  name: 'Home',
  components: {
  	swiper, 
  	swiperSlide
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 4, // 个数
        spaceBetween: 20, // 距离
        navigation: {
          prevEl: 'swiper-button-prev', // 后退按钮的css选择器或HTML元素。
          nextEl: 'swiper-button-next', // 前进按钮的css选择器或HTML元素。
        },
        loop: true, // 开启循环模式
        autoplay: {
          delay: 3000,
          disableOnInteraction: false // 当用户滑动图片后继续自动轮播
        }
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  methods: {
  	prevBtn() {
      this.swiper.slidePrev()
    },
    nextBtn() {
      this.swiper.slideNext()
    }
  }
}

<swiper ref="mySwiper" :options="swiperOption" class="swiperBox" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
        <swiper-slide 
        	v-for="(item,index) in 6"
            :key="index">
        	内容
        </swiper-slide>
        <div slot="button-prev" class="swiper-button-prev" @click="prevBtn"></div>
      	<div slot="button-next" class="swiper-button-next" @click="nextBtn"></div>
</swiper>      	

注意CSS

.swiperBox {
    position: relative;
}

鼠标移入时停止播放，鼠标移出时继续循环播放

在DOM元素中添加两个事件

<div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" > </div>

/** 鼠标移入 */
onMouseEnter() {
  this.swiper.autoplay.stop()
},
/** 鼠标移出 */
onMouseLeave() {
  this.swiper.autoplay.start()
}