vue图片放大器

<div
      class="img_container"
      @mouseenter="handleMouse"
      @mousemove="handleMove"
      @mouseleave="handleLeave"
    >
      <img src="../assets/xx.jpg" alt="xixi" />
    </div>
    
    <div class="img_viwer" v-show="isAmple">
      <img ref="img" src="../assets/xx.jpg" alt="xixi" />
    </div>

data() {
    return {
      isAmple: false,
    };
  },
methods:{
	//鼠标移入，放大器出现
	handleMouse() {
      this.isAmple = true;
    },
    //鼠标移动，放大器出现相应的位置
    handleMove() {
      let left = window.event.offsetX;
      let top = window.event.offsetY;
      let img = this.$refs.img;
      // console.log(top, left);
      if (top < 50) {
        top = 50;
      }
      if (left < 50) {
        left = 50;
      }
      if (top > 150) {
        top = 150;
      }
      if (left > 250) {
        left = 250;
      }
      img.style.marginLeft = -2 * left + 100 + "px";
      img.style.marginTop = -2 * top + 100 + "px";
    },
    //鼠标离开图片，放大器消失
    handleLeave() {
      this.isAmple = false;
    },

}