vue 中使用swiper/vue-awesome-swiper 鼠标移入暂停自动播放，左右按钮控制前进后退，常见避坑
swiper对应vue-awesome-swiper版本会带来很多坑点，推荐下面对照版本，帮大家避坑了，亲测可用!!!
一、npm安装
一定要指定版本
npm install vue-awesome-swiper@3.1.3
npm install swiper@5.2.0
二、Vue main.js 全局注册swiper
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css/swiper.css'//不同版本样式引入方位置不一样，我这个版本就用这种
Vue.use(VueAwesomeSwiper, /* { default global options } */)
三、编写轮播组件
<template>
<div class="content" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
<swiper class="swiper" ref="mySwiper" :options="swiperOptions">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-next" slot="button-prev"></div>
<div class="swiper-button-prev" slot="button-next"></div>
</swiper>
</div>
</template>
<script>
export default {
data() {
return {
swiperOptions: {
pagination: {//分页器
el: ".swiper-pagination",
},
navigation: {// 前进后退按钮 ,不同版本配置方式不同
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true, //开启循环模式
autoplay: {//自动播放,不同版本配置方式不同
delay: 30,
stopOnLastSlide: false,
disableOnInteraction: true,
},
disableOnInteraction: false,
},
};
},
computed: {
mySwiper() {
return this.$refs.mySwiper.swiper
}
},
methods:{
/** 鼠标移入 */
onMouseEnter() {
console.log("鼠标移入");
console.log(this.mySwiper);
this.mySwiper.autoplay.stop()
},
/** 鼠标移出 */
onMouseLeave() {
console.log("鼠标移出");
console.log(this.mySwiper);
this.mySwiper.autoplay.start()
}
}
}
</script>
<style scoped >
.content{
background: pink;
width: 300px;
}
.swiper{
height: 300px;
width: 300px;
font-size: 30px;
/* line-height: 300px; */
border: 1px solid red;
}
</style>
以上方式亲测可以运行 ，样式问题大家根据情况自己设置！
**中文api文档地址：**https://www.swiper.com.cn/api/index.html
