Vue 实现图片监听，鼠标滚轮实现图片缩放功能，可拖拽

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

其实就是这种效果：

HTML代码：

<div span="8" class="left"  @mousewheel.prevent="gunlun">
   <img :src="imgUrl" alt="" class="img" ref="imgDiv" @mousedown="move">
div>

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

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

JS代码：

 // 滚轮滑动
 gunlun(e) {
   //let direction = e.deltaY > 0 ? 'down' : 'up'
   //if (direction === 'up') {
      // 滑轮向上滚动
   //} else {
      // 滑轮向下滚动
   //}
   /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */ 
   var zoom = parseInt(this.$refs.imgDiv.style.zoom) || 100; 
   /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */ 
   zoom += event.wheelDelta / 12;
   /* 最小范围 和 最大范围 的图片缩放尺度 */ 
   if (zoom >= 80 && zoom <500) { 
     this.$refs.imgDiv.style.zoom = zoom + "%"; 
   }
   return false; 
 },
 // 拖动图片
 dropImage(e) {
   e.preventDefault()
   // 获取元素
   var left = document.querySelector('.left')
   var img = document.querySelector('.img')
   var x = e.pageX - img.offsetLeft
   var y = e.pageY - img.offsetTop
   // 添加鼠标移动事件
   left.addEventListener('mousemove', move)
   function move(e) {
     img.style.left = e.pageX - x + 'px'
     img.style.top = e.pageY - y + 'px'
   }
   // 添加鼠标抬起事件，鼠标抬起，将事件移除
   img.addEventListener('mouseup', function() {
       left.removeEventListener('mousemove', move)
   })
   // 鼠标离开父级元素，把事件移除
   left.addEventListener('mouseout', function() {
       left.removeEventListener('mousemove', move)
   })
},

css代码

.left {
   position: relative;
   width: 360px;
   height: 460px;
   background-color: #fff;
   padding: 20px;
   float: left;
   overflow: hidden;
}
.img {
   position: absolute;
   top: 5px;
   left: 7px;
   max-width: 923px;
   max-height: 460px;
   cursor: move;
}