Vue realizes the product magnifying glass effect

<template>
  <div>
    <div class="left">
      <img class="leftImg" src="../../src/assets/curry.jpg" alt="" />
      <!-- Mouse layer cover-->
      <div v-show="topShow" class="top" :style="topStyle"></div>
      <!-- The top layer covers the entire original image space with a transparent layer -->
      <div
        class="maskTop"
        @mouseenter="enterHandler"
        @mousemove="moveHandler"
        @mouseout="outHandler"
      ></div>
    </div>
    <div v-show="rShow" class="right">
      <img
        :style="r_img"
        class="rightImg"
        src="../../src/assets/curry.jpg"
        alt=""
      />
    </div>
  </div>
</template>

<style scoped>
/* Enlarge the image and position the upper left corner to (0,0) */
.rightImg {
  display: inline-block;
  width: 800px;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
} /* Image zoom space on the right*/
.right {
  margin-left: 412px;
  width: 400px;
  height: 400px;
  border: 1px solid red;
  position: relative;
  overflow: hidden;
} /* A top-level mask */
.maskTop {
  width: 400px;
  height: 400px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
} /* Layer mask, position the upper left corner to (0,0) */
.top {
  width: 200px;
  height: 200px;
  background-color: lightcoral;
  opacity: 0.4;
  position: absolute;
  top: 0;
  left: 0;
} /* Display of original image */
.leftImg {
  width: 400px;
  height: 400px;
  display: inline-block;
} /* Container of the original image */
.left {
  width: 400px;
  height: 400px;
  border: 1px solid teal;
  float: left;
  position: relative;
}
</style>

<script>
export default {
  data() {
    return {
      topStyle: { transform: "" },
      r_img: {},
      topShow: false,
      rShow: false,
    };
  },
  methods: {
    // The mouse enters the original image space function enterHandler() {
      // Display of layer mask and magnified space this.topShow = true;
      this.rShow = true;
    },
    // Mouse movement function moveHandler(event) {
      // Mouse coordinate position let x = event.offsetX;
      let y = event.offsetY;
      // The coordinate position of the upper left corner of the layer mask, and limit it: it cannot exceed the upper left corner of the original image area let topX = x - 100 < 0 ? 0 : x - 100;
      let topY = y - 100 < 0 ? 0 : y - 100;
      // Restrict the position of the layer mask again to ensure that the layer mask can only be within the original image area if (topX > 200) {
        topX = 200;
      }
      if (topY > 200) {
        topY = 200;
      }
      // Move control through transform this.topStyle.transform = `translate(${topX}px,${topY}px)`;
      this.r_img.transform = `translate(-${2 * topX}px,-${2 * topY}px)`;
    },
    // Mouse out function outHandler() {
      //Control the hiding of layer cover and magnification space this.topShow = false;
      this.rShow = false;
    },
  },
};
</script>