vue3 图片放大镜

Vue3 中的图片放大镜功能通常通过第三方插件实现，如 `vue-zoom-image` 或者 `vue-magnify-image`. 这些库允许你在 Vue 组件中轻松地添加图片查看器效果，当用户点击或悬停在图片上时，显示一个放大的视图。它们通常包含缩放、平移以及焦点图等交互特性。

安装并引入库后，你可以在组件模板中设置一个图片作为基础元素，并配置放大镜的行为。例如：

<template>
  <div class="zoom-container">
    <img :src="originalImage" @click="showZoom" />
    <vue-zoom-image ref="zoomImage" v-if="isZoomed" :image="zoomedImage" :scale="scale" :offset-x="offsetX" :offset-y="offsetY" @close="hideZoom"></vue-zoom-image>
  </div>
</template>

<script>
import { ref } from 'vue';
import VueZoomImage from 'vue-zoom-image';

export default {
  components: {
    VueZoomImage
  },
  data() {
    return {
      originalImage: 'your-origin-image-url',
      isZoomed: false,
      zoomedImage: null,
      scale: 2,
      offsetX: 0,
      offsetY: 0,
    };
  },
  methods: {
    showZoom(e) {
      this.isZoomed = true;
      this.zoomedImage = e.target.src;
      // 初始化放大镜的位置和缩放比例
    },
    hideZoom() {
      this.isZoomed = false;
      // 当用户关闭放大镜时，重置数据
    },
  }
};
</script>

在这个例子中，当用户点击原始图片时，`showZoom` 方法会被触发，展示放大镜组件，并将当前图片地址赋给 `zoomedImage` 属性。用户关闭放大镜后，`hideZoom` 方法会清除这些状态。