vue-awesome-swiper 4.1.1版本鼠标划上暂停的坑

大坑

因为swiper和vue-awesome-swiper的版本较多，如果使用最新的版本，或者两者版本差距较大，就容易掉进很多的坑里面，各种报错。切记，版本问题

"swiper": "^5.4.5",
"vue-awesome-swiper": "^4.1.1",
//这是我用得版本

首先，安装swiper和vue-awesome-swiper

npm install swiper@5.4.5 --save-dev
npm install vue-awesome-swiper@4.1.1 --save-dev

然后，引入项目文件

import VueAwesomeSwiper from "vue-awesome-swiper";
Vue.use(VueAwesomeSwiper);
import 'swiper/css/swiper.css'

最后，使用

<template>
	<div @mouseover="enter" @mouseleave="leave">
        <!--静态结构-->
        <swiper ref="myBotSwiper" :options="swiperOptions">
            <swiper-slide class="swiper_tr">
                内容1
            </swiper-slide>
            <swiper-slide class="swiper_tr">
                内容2
            </swiper-slide>
            <swiper-slide class="swiper_tr">
                内容3
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
        </swiper>
    </div>
</template>

下面toChinesNum方法参照我的公用方法此链接
链接: https://blog.csdn.net/weixin_49470245/article/details/121355996.

 export default {
        data() {
            return {
                //swiper轮播
                swiperOption: {
                   pagination: {
		              el: '.swiper-pagination',
		              clickable: true,
		              bulletClass : 'my-bullet',//需设置.my-bullet样式
		              bulletActiveClass: 'my-bullet-active',
		              renderBullet(index, className) {
		                return `<span class="${className} swiper-pagination-bullet-custom">第${toChinesNum(index + 1)}页</span>`
		                //toChinesNum这个方法参照我的公用方法上面链接
		                
		              }
		          },
		          direction : 'horizontal',
		          ovserver:true,
		          speed:300,
		          loop:true,
		          autoplay : {
		              delay:10000,
		              pauseOnMouseEnter: true,
		              disableOnInteraction: false,
		          },
                }
            }
        },
        components: {
            swiper,
            swiperSlide
        },
        computed: {
            swiper() {
                return this.$refs.myBotSwiper.swiperInstance;
                //大坑在这之前都是this.$refs.myBotSwiper.swiper
                //而4.1.1是this.$refs.myBotSwiper.swiperInstance
            }
        },
        methods: {
            enter() {
		        this.swiper.autoplay.stop()
		    },
		    leave() {
		        this.swiper.autoplay.start()
		    },
        }
    }