Vue实现放大镜，但是放大图片跟着鼠标移动

Vue实现放大镜，但是放大图片跟着鼠标移动

问题出现在：ref="big"放错位置，应该放在ing中

<template>
  <div class="spec-preview">
    <img :src= imgObj.imgUrl />
    <div class="event" @mousemove="handler"></div>
    <div class="big"  ref="big">
      <img :src= imgObj.imgUrl />
    </div>
    <div class="mask" ref="mask"></div>
  </div>
</template>

以下为完整写出商品放大镜代码：

<template>
  <div class="spec-preview">
    <img :src= imgObj.imgUrl />
    <div class="event" @mousemove="handler"></div>
    <div class="big">
      <img :src= imgObj.imgUrl  ref="big"/>
    </div>
    <div class="mask" ref="mask"></div>
  </div>
</template>
methods:{
          
   
      handler(event){
          
   
        //遮罩层
        let mask = this.$refs.mask;
        let big = this.$refs.big;
        //遮罩层与图片左边框距离
        let left = event.offsetX - mask.offsetWidth/2;
        //遮罩层与图片右边框距离
        let top = event.offsetY - mask.offsetHeight/2;
        //约束范围--当遮罩层与左边距离小于0时，遮罩层的左边固定为0；
        //当图片的left超过offsetWidth时，则将他的左边固定为offsetWidth
        if(left<=0) left=0;
        if(left>=mask.offsetWidth) left=mask.offsetWidth;
        if(top<=0) top=0;
        if(top>=mask.offsetHeight) top=mask.offsetHeight;
        //修改元素的left和top的属性值
        mask.style.left = left + px;
        mask.style.top = top + px;
        //遮罩层向右移动时，放大图片往左走
        //这里需要查看img的width是big的几倍，以下为2倍
        big.style.left = - 2 * left+px;
        big.style.top = - 2 * top + px;
      }
    }