swiper+vue3，使用自动切换autoplay+自定义分页器navigation的报错问题解决

安装swiper

npm i swiper

使用分页器pagination

import { Swiper, SwiperSlide } from 'swiper/vue' // swiper所需组件
import SwiperCore, {Autoplay,EffectCoverflow,Navigation,Pagination
} from 'swiper' // 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
import 'swiper/swiper.min.css'
import 'swiper/css/pagination'
SwiperCore.use([EffectCoverflow, Autoplay, Navigation, Pagination])
...
...
...
// components: { Swiper, SwiperSlide },

会报错：
This dependency was not found:
swiper/css/pagination in ./node_modules/cache-loader/dist/cjs.js??ref–14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref–14-2!./node_modules/cache-loader/dist/cjs.js??ref–0-0!./node_modules/vue-loader-v16/dist??ref–0-1!./src/views/home.vue?vue&type=script&lang=ts
To install it, you can run: npm install --save swiper/css/pagination
Error from chokidar (D:): Error: EBUSY: resource busy or locked, lstat ‘D:\DumpStack.log.tmp’

因为，装6.0+版本的话需要引入另外一个css

正确写法：import 'swiper/css/pagination' 要改为 import 'swiper/swiper-bundle.css'

import { Swiper, SwiperSlide } from 'swiper/vue' // swiper所需组件
import SwiperCore, {Autoplay,EffectCoverflow,Navigation,Pagination
} from 'swiper' // 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
//import 'swiper/swiper.min.css'
import 'swiper/swiper-bundle.css' // 而且也不需要import 'swiper/swiper.min.css'
SwiperCore.use([EffectCoverflow, Autoplay, Navigation, Pagination])
...
...
...
// components: { Swiper, SwiperSlide },

使用自动切换autoplay+自定义分页器navigation

 <swiperclass="swiper_box":loop="swiperOptions.loop":autoplay="swiperOptions.autoplay":navigation="swiperOptions.navigation"@swiper="onSwiper"@slideChange="onSlideChange":slidesPerView="swiperOptions.slidesPerView":centeredSlides="swiperOptions.centeredSlides":coverflowEffect="swiperOptions.coverflowEffect":speed="swiperOptions.speed":delay="swiperOptions.delay":spaceBetween="swiperOptions.spaceBetween":pagination="{ clickable: true }"v-if="swiperShow"><swiper-slideclass="swiper_box_slide"v-for="(item, index) in swiperList":key="index"><img :src="item.fImageUrl" alt="" /></swiper-slide></swiper><!-- 前进/后退 --><button class="next_btn">next</button><button class="pre_btn">prev</button>.........const swiperOptions = reactive({slidesPerView: 'auto', // 解决最后一张切换到第一张中间的空白spaceBetween: 20,centeredSlides: true, // 设置slide居中effect: 'coverflow',coverflowEffect: {rotate: 0,depth: 0,slideShadows: false},navigation: {nextEl: '.next_btn',prevEl: '.pre_btn'}, // 自定义分页器autoplay: {delay: 1000, // 自动切换的时间间隔disableOnInteraction: true // 用户操作swiper之后，是否禁止autoplay},loop: true, // 开启循环speed: 800, // 切换速度clickable: true // 是否开启分页器})

navigation的设置是：nextEl和prevEl