关于swiper6版本autopaley不生效的问题

5版本之前，配置即可实现自动轮播。但是6版本配置是不可以的，需要Swiper.use(Autoplay);使用下swiper里面的Autoplay组件，具体代码如下

创建一个useSwiper.ts：

import Swiper, { Autoplay } from "swiper"
import { onMounted, ref } from "vue"

import "swiper/swiper.less";

Swiper.use(Autoplay); // 6版本自动轮播是需要Swiper.use下的
export default () => {
  let swiper: Swiper
  const swiperDom = ref();
  const activeIndex=ref(0)
  const initSwiper = () => {
    if (swiperDom.value) {
      swiper = new Swiper(swiperDom.value, {
        on: {
          slideChange: (e) => { // 轮播切换
            console.log(e.activeIndex);
            activeIndex.value=e.activeIndex;
          }
        },
        // modules:[Autoplay], // 6版本一下是直接配置modules即可
        autoplay: {
          delay: 2000, // 设置轮播间隔时间，单位为ms
          disableOnInteraction: false, // 当用户与幻灯片互动时仍然继续自动播放
        },
        direction: 'vertical',// 水平方向切换 horizontal 或 垂直方向切换 vertical 。
        loop: true, // 启用循环播放
      })
    }
  }
  // 切换轮播
  const changeSwiper=(flag:number)=>{
    // if(activeIndex.value===0)return;
    // activeIndex.value+=flag;
    // swiper.slideTo(activeIndex.value) // 到某个指定的index的轮播
    if (flag > 0) swiper.slideNext()
    else swiper.slidePrev()
  }
  onMounted(initSwiper)
  return { swiperDom, activeIndex, changeSwiper }
}

vue组件：

<template>
  <div class="text-swiper">
    <div class="swiper" ref="swiperDom">
      <div class="swiper-wrapper">
        <div v-for="(item, index) in awardSwiperData" :key="index" class="swiper-slide flex-center">
          <div class="item-box flex-center">{{ item }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
    import { ref, reactive } from "vue";

    import useSwiper from "@/pages/occupyPlanet/pageComponents/useSwiper";
    const { swiperDom } = useSwiper();

    const awardSwiperData = reactive<Array<any>>(['11111', '2222', '3333'])
</script>

<style scoped lang="scss">
    .text-swiper {
      width:120px;
      height:100px;
      background:skyblue;
      
      .swiper{
        height: 100%;
        overflow: hidden;
      }
    }
</style>