首先，需要創建一個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，從而隱藏預覽圖。