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时，则将他的左边固定为offsetWidthif(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';}}
