Vue3 实现淘宝放大镜效果的方法

在电商应用开发中，商品图片放大镜效果能让用户更清晰地查看商品细节，极大提升购物体验。Vue3 作为流行的前端框架，实现这一效果并不复杂。

搭建基础的 Vue3 项目。通过 Vue CLI 快速创建项目：在终端输入 vue create taobao-magnifier，按提示选择相关配置。项目创建好后，进入项目目录 cd taobao-magnifier。

接着，在 src/components 目录下创建 Magnifier.vue 组件。在模板部分，需要定义放大镜效果所需的 HTML 结构。放置一个大图片展示区和一个小图片缩略图区域。小图片用于触发放大镜效果，大图片用于展示放大后的细节。

<template>
  <div class="magnifier-container">
    <div class="small-img" @mousemove="handleMouseMove">
      <img :src="smallImageSrc" alt="small" />
      <div v-if="isMagnifierVisible" class="magnifier"></div>
    </div>
    <div class="big-img">
      <img :src="bigImageSrc" alt="big" />
      <div v-if="isMagnifierVisible" class="magnifier-result"></div>
    </div>
  </div>
</template>

在脚本部分，定义数据和方法。数据包括小图片和大图片的源路径，以及控制放大镜是否显示的变量。方法 handleMouseMove 用于处理鼠标移动事件，计算放大镜的位置和放大后的显示区域。

import { ref } from 'vue';

export default {
  setup() {
    const smallImageSrc = ref('@/assets/small.jpg');
    const bigImageSrc = ref('@/assets/big.jpg');
    const isMagnifierVisible = ref(false);
    const magnifierX = ref(0);
    const magnifierY = ref(0);

    const handleMouseMove = (e) => {
      const smallImg = e.currentTarget;
      const rect = smallImg.getBoundingClientRect();
      const x = e.pageX - rect.left;
      const y = e.pageY - rect.top;
      if (x >= 0 && x <= smallImg.offsetWidth && y >= 0 && y <= smallImg.offsetHeight) {
        isMagnifierVisible.value = true;
        magnifierX.value = x - 50;
        magnifierY.value = y - 50;
      } else {
        isMagnifierVisible.value = false;
      }
    };

    return {
      smallImageSrc,
      bigImageSrc,
      isMagnifierVisible,
      magnifierX,
      magnifierY,
      handleMouseMove
    };
  }
};

最后，在样式部分，通过 CSS 对放大镜和结果展示区域进行样式设计，使其呈现出期望的效果。

.magnifier-container {
  display: flex;
}
.small-img {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.magnifier {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #ccc;
  left: 0;
  top: 0;
  cursor: move;
}
.big-img {
  position: relative;
  width: 400px;
  height: 400px;
  overflow: hidden;
  margin-left: 20px;
}
.magnifier-result {
  position: absolute;
  width: 200px;
  height: 200px;
  background-size: 400px 400px;
  left: 0;
  top: 0;
}

通过上述步骤，在 Vue3 中成功实现了淘宝放大镜效果。开发者可以根据实际需求进一步优化和扩展该组件，为用户带来更优质的视觉体验。