vue3+ts实现图片预览功能

首先，需要创建一个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>
    <ImagePreview
      v-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，从而隐藏预览图。