vue realizes magnifying glass effect

In this paper, we share the specific code of vue magnifying glass effect for your reference, the specific contents are as follows

Achieve Taobao-like magnifying glass effect

Front-end small white 1, recently in the study of vue, shopping Taobao idle to try to do a magnifying glass, although the results made, but there are 1 problem I can't solve, 4 search also did not find a satisfactory answer, very upset, I hope to have a big brother to help answer, thank you

Stepwise thinking

For the display space (left) of the original picture, img for displaying the original picture can be replaced by canvas to protect the picture Display enlarged indication area when following mouse movement (mouse cover top) Select the enlarged display space (right) in the display layer mask area

HTML Part

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

CSS section

<style scoped>
/*  Enlarge the picture, and position the upper left corner to (0,0) */
.rightImg {
 display: inline-block;
 width: 800px;
 height: 800px;
 position: absolute;
 top: 0;
 left: 0;
}
/*  Area on the right picture enlargement space  */
.right {
 margin-left: 412px;
 width: 400px;
 height: 400px;
 border: 1px solid red;
 position: relative;
 overflow: hidden;
}
/* 1 The highest layer cover  */
.maskTop {
 width: 400px;
 height: 400px;
 position: absolute;
 z-index: 1;
 top: 0;
 left: 0;
}
/*  Layer cover, 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 the original image  */
.leftImg {
 width: 400px;
 height: 400px;
 display: inline-block;
}
/*  Container of original drawing  */
.left {
 width: 400px;
 height: 400px;
 border: 1px solid teal;
 float: left;
 position: relative;
}
</style>

JS implementation part

<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 cover and enlarged space 
   this.topShow = true
   this.rShow = true
  },
  //  Mouse movement function 
  moveHandler(event) {
   //  Coordinate position of mouse 
   let x = event.offsetX
   let y = event.offsetY
   //  The coordinate position of the upper left corner of the layer cover, 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)
   //  Re-check the position of the layer cover 1 Sub-limit, which ensures that the layer cover can only be in the space of the original image area 
   if(topX>200) {
    topX = 200
   }
   if(topY>200) {
    topY = 200
   }
   //  Pass  transform  Carry out movement control 
   this.topStyle.transform = `translate(${topX}px,${topY}px)`
   this.r_img.transform = `translate(-${2*topX}px,-${2*topY}px)`
  },
  //  Mouse out function 
  outHandler() {
   //  Control layer cover and concealment of enlarged space 
   this.topShow = false
   this.rShow = false
  }
 }
}
</script>

Problem

Originally, I added 3 mouse events to the original image container left, and the results kept appearing problems

1. I added a transparent cover maskTop covering the mouse area to make this magnifying glass fully realized. If this maskTop layer cover is not added, when my mouse enters the original image area space, the mouse layer cover will not move with the movement of the mouse, but will carry out high-frequency "vibration" when the mouse moves, and the enlarged area space on the right side does not smoothly change with the movement

2. If the maskTop layer cover is not added, when my mouse moves into the space of the original image area, the mousemove mouse movement event is only executed once, which seems to be blocked by the mouse layer cover

3. In the past, I tried to dynamically determine the initial position of the mouse cover and put it in the mouseenter event. As a result, the mouseenter event was executed abnormally many times, just like it became an mousemove event

I have seen other magnifying glass cases, but they don't need to add masktop, the top layer cover, hoping to have passing bosses to help solve doubts