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

<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>
  <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>
</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]

  const props = defineProps({
    data: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
    type: {
      type: Number as PropType<number>,
      default: 1,
    },
  })

  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)
  }
</script>

<style scoped>
  .swiper-button-disabled {
    cursor: pointer !important;
  }
  .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
  }

  .swiper {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .swiper-slide {
    background-size: cover;
    background-position: center;
  }

  .mySwiper2 {
    height: 100%;
    /* height: calc(100vh - 207px); */
    /* width: 100%; */
  }

  .mySwiper {
    height: 90px;
    box-sizing: border-box;
    padding: 6px 6px;

    /* position: absolute;
    bottom: 0;
    left: 0px;
    right: 0px !important; */
    background: rgba(0, 0, 0, 0.65);

    /* z-index: 1000; */

    /* width: 100%; */
  }

  .mySwiper .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
    background: rgba(0, 0, 0, 0.65);
    cursor: pointer;
  }

  .mySwiper .swiper-slide-thumb-active {
    opacity: 1;
  }

  .swiper-slide img {
    display: block;
    /* width: 100%; */
    height: 100%;
    object-fit: contain;
    pointer-events: none;
  }

  .Thumbs {
    position: relative;
    height: 100%;
    width: auto;
    background: rgba(0, 0, 0, 0.65);
  }

  .Thumbs img {
    height: 100%;
    pointer-events: none;
  }
</style>