vue + js 实现滚轮缩放图片功能

<template>
  <img ref="imgContainer" alt="测试 "
       @mousewheel="handleZoomImg"
       class="zoomImg"
       src="../../img/test.png" 
  />
</template>

<script>
  mounted(){
  document.getElementsByClassName('zoomImg')[0].addEventListener('DOMMouseScroll', this.handleZooming, true) //兼容火狐浏览器， 火狐不支持onmousewheel事件
  }
  methods:{
    // 滚轮放大缩小图片 方法
    handleZoomImg (evt) {
      evt = evt || window.event
      if (!evt) evt = window.event
      if (evt.stopPropagation) { // 这是取消冒泡,阻止浏览器滚动事件
        evt.stopPropagation()
      } else {
        evt.cancelBubble = true
      };
      if (evt.preventDefault) { // 这是取消默认行为，要弄清楚取消默认行为和冒泡不是一回事
        evt.preventDefault()
      } else {
        evt.returnValue = false
      };
      let delta = 0
      if (evt.wheelDelta) {
        delta = evt.wheelDelta / 120
        if (window.opera) delta = -delta
      } else if (evt.detail) {
        delta = -evt.detail / 3
      }
      let imgContainer =  this.$refs.imgContainer
      let width = imgContainer.offsetWidth
      let height = imgContainer.offsetHeight
      if (delta > 0) {
        imgContainer.style.width = `${width * 1.1}px`
        imgContainer.style.height = `${height * 1.1}px`
      } else if (delta < 0) {
        imgContainer.style.width = `${width * 0.9}px`
        imgContainer.style.height = `${height * 0.9}px`
      }
    }
  }
</script>