vue 圖片拖拽和滾輪縮放

這里注意如果自己的頁面有滾動條，一定阻止滾動事件的默認行為，否則縮放圖片的時候，頁面會跟着滾動
@mousewheel.prevent 阻止默認行為

<div ref="imgWrap" @mousewheel.prevent="rollImg" class="modal-img-wrap">
　　<img ref="img" :src="fullscreenImgSrc" @mousedown="moveImg" alt="大圖" class="modal-img"/>
</div>

　　javascript

    moveImg (e) {
      e.preventDefault()
      // 獲取元素
      let imgWrap = this.$refs.imgWrap
      let img = this.$refs.img
      let x = e.pageX - img.offsetLeft
      let y = e.pageY - img.offsetTop
      // 添加鼠標移動事件
      imgWrap.addEventListener('mousemove', move)
      function move (e) {
        img.style.left = e.pageX - x + 'px'
        img.style.top = e.pageY - y + 'px'
      }
      // 添加鼠標抬起事件，鼠標抬起，將事件移除
      img.addEventListener('mouseup', () => {
        imgWrap.removeEventListener('mousemove', move)
      })
      // 鼠標離開父級元素，把事件移除
      imgWrap.addEventListener('mouseout', () => {
        imgWrap.removeEventListener('mousemove', move)
      })
    },
    rollImg () {
      /* 獲取當前頁面的縮放比 若未設置zoom縮放比，則為默認100%，即1，原圖大小 */
      let zoom = parseInt(this.$refs.img.style.zoom) || 100
      /* event.wheelDelta 獲取滾輪滾動值並將滾動值疊加給縮放比zoom wheelDelta統一為±120，其中正數表示為向上滾動，負數表示向下滾動 */
      zoom += event.wheelDelta / 12
      /* 最小范圍 和 最大范圍 的圖片縮放尺度 */
      if (zoom >= 80 && zoom < 500) {
        this.$refs.img.style.zoom = zoom + '%'
      }
      return false
    }

less

    .modal-img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        cursor: move;
        &-wrap {
          position: relative;
          width: 960px;
          height: 560px;
          overflow: hidden;
        }
      }

　　參考: vue實現鼠標滾輪滾動縮放圖片，對圖片進行拖拽