简易放大镜功能vue版

效果:

固定了放大图片的宽高(规定放大2倍)：
放大图：原图的两倍大小。
移动层：根据放大图框的宽高和放大倍数来缩小原图片宽高的相应倍数在此是(400/2)。

<div class="jy">
    <h1>简易放大镜</h1>
    <div class="left">
       <img class="leftImg" :src="picture" alt="" />
       <!-- 鼠标移动层 -->
       <div v-show="showed" class="top" :style="topStyle"></div>
       <!-- 最顶层覆盖了整个原图空间的透明层罩 -->
       <div
          class="maskTop"
          @mouseenter="enterHandler"
          @mousemove="moveHandler"
          @mouseout="outHandler"
       ></div>
    </div>
    <div class="right" v-show="showed">
       <img :style="rimg" class="rightImg" :src="picture" alt="" />
    </div>
</div>
<script>
export default {
  data() {
    return {
      picture: require("@/assets/images/gitmint.png"),
      topStyle: { transform: "" }, // 鼠标层样式
      rimg: { transform: "" }, // 放大图片样式
      showed: false // 是否显示
    };
  },
  methods: {
    // 鼠标进入原图空间函数
    enterHandler() {
      // 层罩及放大空间的显示
      this.showed = true;
    },
    // 鼠标移动函数
    moveHandler(event) {
      // 鼠标在图片框的坐标位置
      const x = event.offsetX;
      const y = event.offsetY;
      // 移动层的左上角坐标位置，并对其进行限制：无法超出原图区域左上角
      let topX = x - 100 < 0 ? 0 : x - 100;
      let topY = y - 100 < 0 ? 0 : y - 100;
      // 保证移动层只能在原图区域空间内
      if (topX > 200) topX = 200;
      if (topY > 200) topY = 200;
      // 通过 transform 进行移动控制
      this.topStyle.transform = `translate(${topX}px,${topY}px)`;
      this.r_img.transform = `translate(-${2 * topX}px,-${2 * topY}px)`;
    },
    // 鼠标移出函数
    outHandler() {
      // 控制移动层与放大空间的隐藏
      this.showed = false;
    }
  }
};
</script>

<style lang="less" scoped>
  .jy {
    height: 450px;
    position: relative;
    /* 原图的容器 */
    .left {
      width: 400px;
      height: 400px;
      border: 1px solid teal;
      position: relative;
      top: 0;
      cursor: move;
      /* 原图的显示 */
      .leftImg {
        width: 400px;
        height: 400px;
        display: inline-block;
      }
      /* 移动层，通过定位将左上角定位到(0,0) */
      .top {
        width: 200px;
        height: 200px;
        background-color: lightcoral;
        opacity: 0.4;
        position: absolute;
        top: 0;
        left: 0;
      }
      /* 一个最高层层罩 */
      .maskTop {
        width: 400px;
        height: 400px;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
      }
    }
    /* 右边的区域图片放大空间 */
    .right {
      width: 400px;
      height: 400px;
      border: 1px solid red;
      position: absolute;
      top: 47px;
      left: 412px;
      overflow: hidden;
      z-index: 999;
      .rightImg {
        display: inline-block;
        width: 800px;
        height: 800px;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
</style>