Vue3+element 实现双轮播效果

实现效果。点击父页面图片，进入放大图页面。点击大图切换，小图片也进行切换，点击小图片，大图片跟着切换
 一：弹框页面   接收父组件传递的图片列表数据，以及当前点击放大的图片url 

   <el-dialog
      v-model="dialogVisible"
      @close="closeDialog"
      destroy-on-close
      :close-on-click-modal="false"
      width="500px"
    >
//引用子组件
      <PlusImage
        :dialogImageUrl="dialogImageUrl"
        :fileList="fileList"
      ></PlusImage>
    </el-dialog>  
<script lang="ts" setup>
import { defineProps, ref, watch, defineEmits } from "vue";
import PlusImage from "./PlusImage.vue";
//定义弹框的显示隐藏
const dialogVisible = ref(false);
const emit = defineEmits(["closeVisible"]);
const dialogImageUrl: any = ref("");
//接收父组件传递的数据
const props = defineProps({
  dialogImageUrl: String,
  fileList: Array,
  dialogVisible: Boolean,
});
const fileList: any = ref([]);
watch(props, (newVal) => {
  dialogVisible.value = newVal.dialogVisible;
  dialogImageUrl.value = newVal.dialogImageUrl;
  fileList.value = newVal.fileList;
});
// // 关闭弹框
const closeDialog = () => {
  dialogVisible.value = false;
  emit("closeVisible", false);
};

 二：放大图片页面，引用走马灯组件

<el-carousel
    ref="carouselImage"
      trigger="click"
      height="600px"
      class="carouselBox"
      indicator-position="none"
      @change="changeCarousel"
      :autoplay="false"
      :initial-index="initialIndex"
    >
      <el-carousel-item
        class="carouselImageBox"
        v-for="item in fileImages"
        :key="item.id"
      >
        <el-image class="carouselImage" :src="item.url" alt="" fit="contain" />
      </el-carousel-item>
    </el-carousel>
      <div class="footerBox">
      <div
        class="footerList"
        //动态位移
        :style="{ transform: 'translateX(-' + tagPosition + 'px)' }"
      >
        <div
          class="footerImage"
          v-for="(item, index) in fileImages"
          :key="index"
          :span="4"
          @click="clickImageItem(item,index)"
          :class="item.url === currentUrl ? 'isCurrent' : ''"
        >
          <el-image
            class="footer-image-item"
            :src="item.url"
            fit="contain"
          />
        </div>
      </div>
    </div>
import { ref, defineProps,watch } from "vue";
const fileImages: any = ref([]);
const currentUrl: any = ref("");
const tagPosition = ref(0);
const carouselImage:any=ref()
// 默认索引
const initialIndex: any = ref(0);
// 父组件传递的数据
const props = defineProps({
  fileList: Array,
  dialogImageUrl: String,
});

fileImages.value = props.fileList;

currentUrl.value = props.dialogImageUrl;
// 监听当前的currentUrl，来判断当前的索引
watch(
  () => currentUrl.value,
  (newVal) => {
    fileImages.value.map((item: { url: any; }, index: number) => {
      if (item.url === newVal) {
      initialIndex.value = index;
    }
    });
  },{
    immediate:true
  }
);
// 监听索引变化，来计算位移距离
watch(
  () => initialIndex.value,
  (newVal,oldVal) => {
// 通过判断索引的older 和 newValue 值来确定是向前还是向后移动 
// 4个一组，点击第四个图片时，要向前移动一组，来展示后面的图片存在
    if(newVal>1||newVal%3==0){
      tagPosition.value =Math.floor(newVal/3)*345
    }
    if(oldVal&&oldVal>newVal){
      if(newVal>1&&newVal%3==0){
        let newValue=Math.floor(newVal/3)-1
      tagPosition.value =newValue*350
    }
    }
  },{
    immediate:true
  }
);

//小图片切换
const clickImageItem = (event:any,index: any) => {
  carouselImage.value?.setActiveItem(index)
  initialIndex.value=index
  currentUrl.value =event.url
};

// 切换幻灯片函数
const changeCarousel = (event: string | number) => {
  currentUrl.value = (props as any).fileList?.[event].url;
};

参考文档 Carousel 走马灯 | Element Plus  根据setActiveItem属性来手动改变当前索引