图片放大镜效果

安装：  vueuse  插件

npm i @vueuse/core

 搜索：   useMouseInElement   方法

 上面的 x,y,isOutside 参数分别为 鼠标在目标上的位置、是否在目标盒子上

 上面的target :实际上是滑块所在的大盒子

            isOutside ：未移入值为true,移入值为false

 代码如下：

 

总结：

1、有效移动范围内的计算逻辑

     横向： 100 < elementX < 300 , left  = elementX - 小滑块宽度的一半

     纵向： 100 < elementX < 300 , top = elementX - 小滑块高度的一半

2、边界距离控制

     横向：elementX > 300 ，left = 200   elementX < 100 ，left = 0

     纵向：elementY > 300 ，top = 200   elementY < 100 ，top = 0