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">
    <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>
  </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">
    <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>
  </div>
</template>
<script setup lang="ts">
  import type { PropType} from 'vue'
  import { ref, watch, nextTick } from 'vue'
  // @ts-ignore
  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
  // @ts-ignore
  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>