Update swiper implementation and configuration

pages/down-drawe-detail/components/swiper.vue

@@ -1,74 +1,32 @@
 <template>
-  <div
-    class="box-border h-[631px] w-[1019px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] pa-[30px]"
-  >
-    <ClientOnly>
-      <swiper
-        :style="{
-          '--swiper-navigation-color': '#666',
-          '--swiper-pagination-color': '#666',
-        }"
-        :space-between="10"
-        disabled-class=""
-        :thumbs="{ swiper: thumbsSwiper }"
-        :modules="modules"
-        class="mySwiper2"
-        @swiper="onSwiper"
-        @slide-change="changeSwiper"
-      >
-        <swiper-slide v-for="(item, index) in props.data" :key="index"
-          ><el-image fit="cover" :src="item.url"
-        /></swiper-slide>
-        <div class="swiper-button-prev color-[#fff]" @click="handlePrev"></div
-        ><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
-        <div class="swiper-button-next color-[#fff]" @click="handleNext"></div
-        ><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
-      </swiper>
-    </ClientOnly>
+  <div class="box-border h-[631px] w-[1019px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] pa-[30px]">
+    <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide" v-for="(item, index) in props.data" :key="index">
+          <img :src="item.url" />
+        </div>
+      </div>
+      <div class="swiper-button-next"></div>
+      <div class="swiper-button-prev"></div>
+    </div>
   </div>
   <div class="mb-[20px] mt-[34px] flex items-center text-[16px] text-[#333333] font-normal">
-    <div class="h-[24px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div
-    ><span class="ml-[10px]">{{
-      props.type === 1 ? '图纸' : props.type === 2 ? '文本' : '模型'
-    }}</span></div
-  >
-  <div
-    class="box-border h-[126px] w-[1019px] border border-[#EEEEEE] rounded-[6px] border-solid bg-[#FFFFFF] pa-[23px]"
-  >
-    <ClientOnly>
-      <swiper
-        :space-between="10"
-        :slides-per-view="4"
-        :free-mode="true"
-        :watch-slides-progress="true"
-        :modules="modules"
-        class="mySwiper"
-        @swiper="setThumbsSwiper"
-      >
-        <swiper-slide v-for="(item, index) in props.data" :key="index">
-          <div class="Thumbs">
-            <el-image fit="cover" :src="item.url" />
-          </div>
-        </swiper-slide>
-      </swiper>
-    </ClientOnly>
+    <div class="h-[24px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div>
+    <span class="ml-[10px]">{{ props.type === 1 ? '图纸' : props.type === 2 ? '文本' : '模型' }}</span>
+  </div>
+  <div class="box-border h-[126px] w-[1019px] border border-[#EEEEEE] rounded-[6px] border-solid bg-[#FFFFFF] pa-[23px]">
+    <div thumbsSlider="" class="swiper mySwiper">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide" v-for="(item, index) in props.data" :key="index">
+          <img :src="item.url" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
   import type { PropType } from 'vue'
-  import { ref, watch, nextTick } from 'vue'
-  import { Swiper, SwiperSlide } from 'swiper/vue'
-
-  import 'swiper/css'
-
-  import 'swiper/css/free-mode'
-  import 'swiper/css/navigation'
-  import 'swiper/css/thumbs'
-
-  // import required modules
-  import { FreeMode, Navigation, Thumbs } from 'swiper/modules'
-
-  const modules = [FreeMode, Navigation, Thumbs]
+  import { ref, watch, nextTick, onMounted } from 'vue'
 
   const props = defineProps({
     data: {
@@ -81,50 +39,25 @@
     },
   })
 
-  const emit = defineEmits(['changeSwiper', 'nextSwiper'])
-
-  const thumbsSwiper = ref<any>(null)
-  const useSwiper = ref<any>(null)
-  const activeIndex = ref<number>(0)
-
-  watch(
-    () => props.data,
-    (value) => {
-      if (value.length) {
-        nextTick(() => {
-          const thumb_active = document.querySelector(`.mySwiper .swiper-slide`)
-          thumb_active?.classList.add('swiper-slide-thumb-active')
-        })
-      }
-    }
-  )
-
-  const setThumbsSwiper = (swiper: any) => {
-    thumbsSwiper.value = swiper
-  }
-
-  const handlePrev = () => {
-    if (activeIndex.value === 0 || props.data.length === 0) {
-      emit('nextSwiper', false)
-    }
-    useSwiper.value.slidePrev()
-  }
-
-  const handleNext = () => {
-    if (activeIndex.value === props.data.length - 1 || props.data.length === 0) {
-      emit('nextSwiper', true)
-    }
-    useSwiper.value.slideNext()
-  }
-
-  const onSwiper = (swiper: any) => {
-    useSwiper.value = swiper
-  }
-
-  const changeSwiper = (e: any) => {
-    activeIndex.value = e.activeIndex
-    emit('changeSwiper', e.activeIndex)
-  }
+  onMounted(() => {
+    // Initialize Swiper
+    var swiper = new Swiper('.mySwiper', {
+      spaceBetween: 10,
+      slidesPerView: 4,
+      freeMode: true,
+      watchSlidesProgress: true,
+    })
+    var swiper2 = new Swiper('.mySwiper2', {
+      spaceBetween: 10,
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+      thumbs: {
+        swiper: swiper,
+      },
+    })
+  })
 </script>
 
 <style scoped>