Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能

其实想要实现功能很简单，就是在一张图片上监听鼠标滑轮滚动的事件，然后根据上滚还是下滚实现图片的缩放。

其实就是这种效果：

Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能_缩放
其实代码不是很难。

HTML代码：

<img id="img" :src="src" alt="" @mousedown.prevent="dropImage" @mousewheel.prevent='gunlun'
      :style="{transform:'scale('+multiples+')'}">

@mousewheel.prevent 来监听鼠标滑轮滚动。

没了，当鼠标在这个图片滚动滑轮的时候就会被这个时间监听到，然后就可以写自己的逻辑代码了。

JS代码：

// 滚轮滑动
      gunlun(e) {
        let direction = e.deltaY > 0 ? 'down' : 'up'
        if (direction === 'up') {
          // 滑轮向上滚动
        } else {
          // 滑轮向下滚动
        }
      },

然后就可以在里面编写自己的业务逻辑了。

单纯的使图片缩小放大还不至于使用防抖和节流啥的，但是如果需要请求后台记得做好防抖。

【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获取授权并注明出处！

【重要说明】本文为本人的学习记录，论点和观点仅代表个人而不代表当时技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！

​

【Gitee地址】秦浩铖：​​https://gitee.com/wjw1014​​