首先，需要创建一个Vue组件，用于显示图片和预览图。

<template><div><img :src="imageSrc" @mouseover="showPreview" @mouseout="hidePreview" /><div v-if="previewVisible" class="preview-container"><img :src="previewSrc" class="preview-image" /></div></div>
</template><script lang="ts">
import { ref } from 'vue';export default {props: {imageSrc: {type: String,required: true,},previewSrc: {type: String,required: true,},},setup(props) {const previewVisible = ref(false);const showPreview = () => {previewVisible.value = true;};const hidePreview = () => {previewVisible.value = false;};return {previewVisible,showPreview,hidePreview,};},
};
</script><style scoped>
.preview-container {position: absolute;top: 0;left: 0;z-index: 999;
}.preview-image {width: 200px;height: 200px;
}
</style>

在父组件中使用这个图片预览组件。

<template><div><ImagePreviewv-for="image in images":key="image.id":imageSrc="image.src":previewSrc="image.previewSrc"/></div>
</template><script lang="ts">
import { defineComponent } from 'vue';
import ImagePreview from './ImagePreview.vue';export default defineComponent({components: {ImagePreview,},data() {return {images: [{id: 1,src: 'path/to/image.jpg',previewSrc: 'path/to/preview.jpg',},// 添加更多图片...],};},
});
</script>

在父组件中，通过遍历images数组，将每个图片的路径传递给ImagePreview组件的imageSrc和previewSrc属性。

当用户将鼠标悬停在图片上时，@mouseover事件会触发showPreview方法，将previewVisible的值设为true，从而显示预览图。

当用户将鼠标移出图片时，@mouseout事件会触发hidePreview方法，将previewVisible的值设为false，从而隐藏预览图。