解决的问题:默认的插件在点击预览图片时,总是从第一张图片开始显示,而不是当前点击的这一张,于是便做了下面的优化,使用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>