vue3中使用swiper遇到的问题怎么解决

npm install swiper -s // @9.2.0// 或者安装指定版本npm install swiper@8.4.7 -s

import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue";import "swiper/swiper.min.css";

<template>  <swiper>    <swiper-slide>Slide 1</swiper-slide>    <swiper-slide>Slide 2</swiper-slide>    <swiper-slide>Slide 3</swiper-slide>    <swiper-slide>Slide 4</swiper-slide>    <swiper-slide>Slide 5</swiper-slide>  </swiper></template><script>// Navigation: 方向箭头：向左，向右/* Pagination: 轮播小圆点clickable: 如果为true，则单击分页按钮将跳转到对应的slide。仅适用于项目符号分页类型*//* Scrollbar: 滚动条draggable: 设置为true可使滚动条可拖动，从而控制滑块位置*//* AutoPlay: 自动轮播delay: 转换之间的延迟（毫秒）。如果未指定此参数，将禁用自动播放disableOnInteraction：设置为false，用户交互（滑动）后自动播放不会被禁用，每次交互后都会重新启动pauseOnMouseEnter：启用后，指针（鼠标）在Swiper容器上输入时将暂停自动播放。*/</script>

import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from "swiper";import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue";import "swiper/swiper.min.css";import "swiper/modules/navigation/navigation.min.css";import "swiper/modules/pagination/pagination.min.css";import "swiper/modules/scrollbar/scrollbar.min.css";import "swiper/modules/autoplay/autoplay.min.css";export default {  components: {    Swiper,    SwiperSlide,  },  setup() {    const onSwiper = (swiper) => {      console.log(swiper);    };    const onSlideChange = () => {      console.log("slide change");    };    return {      onSwiper,      onSlideChange,      modules: [Navigation, Pagination, Scrollbar, A11y, Autoplay],    };  },};.swpier {  height: 200px;}.swiper-slide {  width: 100px;  line-height: 40px;  font-size: 30px;  text-align: center;  border: 1px solid pink;}

// 通过class获取dom，并在循环时初始化，为了保证echarts初始化时dom已经更新渲染，加一个setTimeout函数 setTimeout(() => {  const myEchart = document.getElementsByClassName(classname);  let chart = null;  Array.prototype.forEach.call(myEchart, function (element, i, arr) {    element.setAttribute("_echarts_instance_", "");    chart = echarts.init(element);    console.log(arr);    chart.setOption(optionArr[i]);  });})