## 设计鼠标移动到商品图片时，根据鼠标移动的一块区域，在右侧放大并显示出来，鼠标移出后关闭放大的悬窗；注：本文采用**Vue3**版本进行开发，原理和方法都一样，改为Vue2也很简单 ## 效果图： ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/abde6b0149e04f1f81c553b14d5e6dfc~tplv-k3u1fbpfcp-zoom-1.image) ## 实现方法关键词：鼠标移动。那么就联系到了鼠标事件mousemove（移动）、mouseleave(移出目标区域) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d172dbcb523f432b81a5ac5174cf4da8~tplv-k3u1fbpfcp-watermark.image?) 理清了思路，接下来就办了 1. 创建目标区域的图片(ref="moveDom")，和创建鼠标所在的区域（class="border"），放大的图片显示（pop-image） ```javascript

``` 2. 添加鼠标监听事件 ```javascript onMounted(() => { moveDom.value.addEventListener('mousemove', moveEvent) moveDom.value.addEventListener('mouseleave', mouseleaveEvent) }) //不要忘了卸载 onBeforeUnmount(() => { moveDom.value.removeEventListener('mouseleave', mouseleaveEvent) moveDom.value.removeEventListener('mousemove', moveEvent) }) ``` 3. 最后是处理鼠标的坐标位置，计算出要放大的区域 ```javascript // 鼠标移动事件 const moveEvent = rafThrottle(e => { let event = e || window.event; if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } flag.value = true let { offsetX, offsetY } = e; let { height, width } = boxStyle.value styleObj.value = { left: (offsetX - watchWidth / 2) > 0 ? (offsetX + watchWidth / 2) >= width ? width - watchWidth : offsetX - watchWidth / 2 : 0, top: (offsetY - watchWidth / 2) > 0 ? (offsetY + watchWidth / 2) >= height ? height - watchWidth : offsetY - watchWidth / 2 : 0 } let { left, top } = styleObj.value; popStyle.value = `left:-${left * (1000 / watchWidth)}px;top:-${top * (1000 / watchWidth)}px` }) ``` ## 完整的代码 ```javascript ``` ## 结语提示一下：使用vue3获取ref常常遇到的一个坑是，忘记return，会导致获取的ref是null 如果不明白为什么用offsetX, offsetY，建议查阅相关资料弄懂了再来看该文章