js滚轮放大缩小图片

html结构  
//mousewheel js鼠标滚轮事件
<img :src='url图片地址' @mousewheel="handleZoomImg" ref="imgContainer" >


js代码
// 滚轮放大缩小图片 方法
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
  // console.log(imgContainer[0].offsetWidth);
  let width = imgContainer[0].offsetWidth
  let height = imgContainer[0].offsetHeight
  if (delta > 0) {
    imgContainer[0].style.width = `${width * 1.1}px`
    imgContainer[0].style.height = `${height * 1.1}px`
  } else if (delta < 0) {
    imgContainer[0].style.width = `${width * 0.9}px`
    imgContainer[0].style.height = `${height * 0.9}px`
  }
},