fix: delay timeoutId clear

Author: anthinkingcoder

example/App.vue

@@ -4,9 +4,10 @@
                     width="400"
                     height="300"
                     zoom-width="400"
-                    zoom-height="300"></ImageMagnifier>
+                    zoom-height="300"
+                    :delay-in="300"
+    ></ImageMagnifier>
 </template>
-
 <script>
   import ImageMagnifier from '../src/components/ImageMagnifier.vue'
   import image from './img/DA2D9393-4081-4384-B493-95DA1620C26D.png'

lib/magnifier.common.js

@@ -4,12 +4,12 @@
              :height="height"
              :src="src"
              class="image-magnifier__img"
-             @mouseover="handleOver"
+             @mouseenter="handleOver"
              @mousemove="handleMove"
-             @mouseout="handleOut"
+             @mouseleave="handleOut"
              ref="img"
         />
-        <div class="image-magnifier__mask" :class="maskClass" :style="maskStyle" v-show="zoomShow" ref="mask">
+        <div class="image-magnifier__mask" :class="maskClass" :style="maskStyle" ref="mask">
         </div>
         <div class="image-magnifier__zoom" :class="zoomClass" :style="zoomStyle" v-show="zoomShow">
             <img :src="zoomSrc" :style="zoomImgStyle"/>
@@ -73,6 +73,8 @@
           x: 0,
           y: 0
         },
+        zoomInTimeoutId: null,
+        zoomOutTimeoutId: null,
       }
     },
     computed: {
@@ -94,7 +96,8 @@
           transform: `translate(${this.maskX}px, ${this.maskY}px)`,
           willChange: 'transform',
           pointerEvents: 'none',
-          zIndex: 1000
+          zIndex: 1000,
+          visibility: this.zoomShow ? 'visible' : 'hidden',
         }
       },
       zoomStyle() {
@@ -123,25 +126,22 @@
     },
     methods: {
       handleOver() {
+        clearTimeout(this.zoomOutTimeoutId);
+        this.calcZoomSize();
         if (this.delayIn === 0) {
           this.zoomShow = true;
-          this.calcZoomSize();
-        }else {
-          setTimeout(() => {
+        } else {
+          this.zoomInTimeoutId = setTimeout(() => {
             this.zoomShow = true;
-            this.calcZoomSize();
-          },this.delayIn)
+          }, this.delayIn)
         }
       },
-      calcZoomSize () {
-        this.$nextTick(() => {
-          this.imgRect = this.$refs.img && this.$refs.img.getBoundingClientRect();
-          this.maskRect = this.$refs.mask && this.$refs.mask.getBoundingClientRect();
-
-          //计算大图宽高
-          this.zoomImgWidth = (this.imgRect.width / this.maskRect.width) * this.zoomWidth;
-          this.zoomImgHeight = (this.imgRect.height / this.maskRect.height) * this.zoomHeight;
-        })
+      calcZoomSize() {
+        this.imgRect = this.$refs.img && this.$refs.img.getBoundingClientRect();
+        this.maskRect = this.$refs.mask && this.$refs.mask.getBoundingClientRect();
+        //计算大图宽高
+        this.zoomImgWidth = (this.imgRect.width / this.maskRect.width) * this.zoomWidth;
+        this.zoomImgHeight = (this.imgRect.height / this.maskRect.height) * this.zoomHeight;
       },
       handleMove(e) {
         this.maskX = this.outXCheck(e.pageX - this.imgRect.left);
@@ -153,10 +153,11 @@
         this.zoomPosition.y = this.maskY * (this.zoomImgHeight / this.imgRect.height)
       },
       handleOut() {
+        clearTimeout(this.zoomInTimeoutId);
         if (this.delayOut === 0) {
           this.zoomShow = false;
-        }else {
-          setTimeout(() => {
+        } else {
+          this.zoomOutTimeoutId = setTimeout(() => {
             this.zoomShow = false;
           }, this.delayOut);
         }