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 {
          // 滑轮向下滚动
        }
      },

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

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