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 {
          // 滑輪向下滾動
        }
      },

然后就可以在里面編寫自己的業務邏輯了。

單純的使圖片縮小放大還不至於使用防抖和節流啥的，但是如果需要請求后台記得做好防抖。