vue3+element-plus(el-carousel)实现图片轮播和点击预览功能
<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>