Detailed explanation of the encapsulation and use of the Vue image magnifier component

<template>
  <div>
    <div class="move" @mouseover="over()" @mouseout="out()" @mousemove="move($event)">
      <div id="small"> //Small picture and mask layer container<div id="float"></div> //Mask layer<img :src="item" id="smallimg"> //Picture to be enlarged</div>
    </div>
    <div id="big">
      <img :src="item"> //Enlarged image</div>
  </div>
</template>

<script>
  var float,smallimg,big,bigImg,small,float_maxJL_t,float_maxJL_l,bigImg_maxJL_t,bigImg_maxJL_l;

  export default{
    props: {
      item:
        type: String
      }
    },
    data() {
     return {
     }
    }, 

    mounted(){
      float = document.getElementById("float"); //Left mask layer smallimg = document.getElementById("smallimg"); //Small image on the left big = document.getElementById("big"); //Right visible area bigImg = big.getElementsByTagName("img")[0]; //Right big image small = document.getElementById("small");// Container on the left //Get the width and height of the right visible area var bigW = big.clientWidth;
      var bigH = big.clientHeight;

      //Width and height of the large image on the right var bigImgW = bigImg.offsetWidth;
      var bigImgH = bigImg.offsetHeight;

      //Width and height of the small image on the left var smallImgW = smallimg.offsetWidth;
      var smallImgH = smallimg.offsetHeight;

      //Width and height of the left mask layer float.style.width = bigW/bigImgW * smallImgW + "px"; //175
      float.style.height = bigH/bigImgH * smallImgH/3*2 + "px";     

      //The maximum distance of mask layer movement float_maxJL_l = small.clientWidth -float.offsetWidth-10;
      float_maxJL_t = small.clientHeight - float.offsetHeight - 5;

      //The maximum distance the right picture moves bigImg_maxJL_l = bigImg.clientWidth - big.offsetWidth;
      bigImg_maxJL_t = bigImg.clientHeight - big.offsetHeight;

      big.style.display = "none";
      float.style.visibility = "hidden"; //The mouse has not moved into the left area, so the mask layer and the large image on the right are invisible},

    methods: {
    //Move the mouse into the left area to make the mask layer and the large image on the right visible over: function () {
        float.style.visibility = "visible";
        big.style.visibility = "visible";
        big.style.display = "block";
      }, 

      //Move the mouse out of the left area to make the mask layer and the large image on the right invisible out: function () {
        float.style.visibility = "hidden";
        big.style.display = "none";
      }, 

      //When the mouse moves, the mask layer moves with the mouse move: function (ev) {
        var l = ev.clientX - small.offsetLeft - float.offsetWidth/2;
        var t = ev.clientY - small.offsetTop - float.offsetHeight/2;

        if( l < 0 ) l = 0; // value is set to 0 if it exceeds the left boundary
        if( t < 0 ) t = 0; // value exceeds the upper boundary and is set to 0

        if( l > float_maxJL_l ) l = float_maxJL_l; //Limit its range of movement within the container if( t > float_maxJL_t ) t = float_maxJL_t;

        //Find a ratio var scaleL = l/float_maxJL_l;
        var scaleT = t/float_maxJL_t;

         //Mask layer movement position float.style.left = l + "px";
        float.style.top = t + "px"; 

         //Movement position of the big picture on the right side bigImg.style.left = -scaleL * bigImg_maxJL_l + "px";
        bigImg.style.top = -scaleT * bigImg_maxJL_t + "px";
      },
    },
  }
</script>

//css style <style lang="scss" rel="stylesheet/scss" scoped>
  @import 'src/assets/scss/variable.scss';
  #float {
    width: 120px;
    height: 120px;
    position: absolute; //Requiredbackground: $primary;
    border: 1px solid #ccc;
    opacity: 0.5;
    cursor:move;
  }
  #big {
    position: absolute; //Required top: 260px;
    left: 37.6%;
    width: 350px;
    height: 500px;
    overflow: hidden;
    border: 1px solid #ccc;
    background: #ffffff;
    z-index: 1;
    visibility: hidden;
  }
  #small {
    position: relative; //Required z-index: 1;
    img{
      width:340px;
      height:320px;
    }
  }
  #big img {
    position: absolute; //Required z-index: 5;
    width:700px;
    height:700px;
  }
</style>

move = function (ev){
        var scroll = this.getClientHeight(); //Get the current interface moving position var l = ev.clientX - small.offsetLeft - float.offsetWidth/2;
        var t = ev.clientY - small.offsetTop - float.offsetHeight/2;

        t=t+scroll; //The height of the mask layer should be added to the scrolling height of the interface accordingly if( l < 0 ) l = 0;
        if( t < 0 ) t = 0; 

        if( l > float_maxJL_l ) l = float_maxJL_l;
        if( t > float_maxJL_t ) t = float_maxJL_t;

        var scaleL = l/float_maxJL_l;
        var scaleT = t/float_maxJL_t;

        float.style.left = l + "px";
        float.style.top = t + "px";

        bigImg.style.left = -scaleL * bigImg_maxJL_l + "px";
        bigImg.style.top = -scaleT * bigImg_maxJL_t + "px";
},
//Method to get the scroll height of the interface getClientHeight: function(){
    var scrollTop=0;
    if(document.documentElement&&document.documentElement.scrollTop)
    {
      scrollTop=document.documentElement.scrollTop;
    }
    else if(document.body)
    {
      scrollTop=document.body.scrollTop;
    }
    return scrollTop;
}