vue3+element-plus(el-carousel)实现图片轮播和点击预览功能

解决的问题：默认的插件在点击预览图片时，总是从第一张图片开始显示，而不是当前点击的这一张，于是便做了下面的优化，使用js记录当前点击图片的索引，再进行预览。

<template>
  <el-carousel indicator-position="outside" :autoplay="true" style="margin-top: 5px;" >
    <el-carousel-item v-for="(item, index) in imageList" :key="index">
      <el-image
        style="width: 100%; height: 100%"
        :src=item
        fit="cover"
        :preview-src-list="imageList"
        :initial-index="currentImageIndex"
        preview-teleported
        @click="handleImageClick(index)"
      />
    </el-carousel-item>
  </el-carousel>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const imageList = ref([...]); // 图片列表
    const currentImageIndex = ref(0); // 当前点击的图片索引

    const handleImageClick = (index) => {
      currentImageIndex.value = index;
    };

    return {
      imageList,
      currentImageIndex,
      handleImageClick
    };
  }
};
</script>