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

 <swiper
        class="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-slide
          class="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