vue中使用swiper实现缩略图完整版

在Vue中使用Swiper实现缩略图全版的效果，你可以这样做：

1. 安装Swiper：

npm install swiper

2. 在Vue组件中引入Swiper及其样式：

import { Swiper, SwiperSlide } from 'swiper/vue';
import SwiperCore, { Navigation, Pagination } from 'swiper';
import 'swiper/swiper-bundle.css';
 
// 配置Swiper以用于缩略图和全图展示
SwiperCore.use([Navigation, Pagination]);

3. 在模板中定义缩略图和全图的Swiper实例：

<template>
  <div>
    <!-- 缩略图Swiper -->
    <Swiper :slidesPerView="4" :spaceBetween="20" navigation clickable>
      <SwiperSlide v-for="(thumb, index) in thumbnails" :key="index">
        <img :src="thumb" @click="goToFull(index)" class="thumb-image" />
      </SwiperSlide>
    </Swiper>
 
    <!-- 全图Swiper -->
    <Swiper :slidesPerView="1" :navigation="true" :thumbs="{ swiper: thumbnailsSwiper }">
      <SwiperSlide v-for="(full, index) in fullImages" :key="index">
        <img :src="full" class="full-image" />
      </SwiperSlide>
    </Swiper>
  </div>
</template>

4. 在脚本中设置数据和Swiper的配置：

<script>
import { ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import SwiperCore, { Navigation, Pagination, Thumbs } from 'swiper';
import 'swiper/swiper-bundle.css';
 
SwiperCore.use([Navigation, Pagination, Thumbs]);
 
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  setup() {
    const thumbnails = ref([...]); // 缩略图的图片数组
    const fullImages = ref([...]); // 对应的全图的图片数组
    const thumbnailsSwiper = ref(null);
 
    // 跳转到对应的全图
    const goToFull = (index) => {
      fullImagesSwiper.value.slideTo(index);
    };
 
    return {
      thumbnails,
      fullImages,
      thumbnailsSwiper,
      goToFull
    };
  }
};
</script>

5. 在样式中定义图片的样式：

<style scoped>
.thumb-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  cursor: pointer;
}
 
.full-image {
  width: 100%;
  height: auto;
}
</style>

确保你已经正确设置了thumbnails和fullImages数组，它们包含了对应的缩略图和全图的图片链接。这样就可以实现缩略图全版的效果了。