vue监听alt键和鼠标滚轮对图片进行缩放？

Question

const mousewheelEventName = !!window.navigator.userAgent.match(/firefox/i) ? 'DOMMouseScroll' : 'mousewheel';
// 滚轮事件
const img5 = document.querySelector('#img5')
const img6 = document.querySelector('#img6')
document.addEventListener(mousewheelEventName, (e) => {
// 是否按住了alt键
if (e.altKey) {
    e.preventDefault();
    const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
    this.params.zoomVal += e.wheelDelta / 1200;
    if (delta > 1) {
      // 以下就是你要写的自定义代码
      img5.style.transform = "scale(" + this.params.zoomVal + ")";
      img6.style.transform = "scale(" + this.params.zoomVal + ")";
    }else{
      // 以下就是你要写的自定义代码;
      img5.style.transform = "scale(" + this.params.zoomVal + ")";
      img6.style.transform = "scale(" + this.params.zoomVal + ")";
    }
}
}, { passive: false });

报错原因是

这样写了以后没有生效，是什么原因
应该怎么写？

Answer 1

报错的内容是说null没有所谓的 .style属性 。
原因八成是执行这段代码的时候图片对象还没被添加到 HTML中。
在 Vue 中就不要使用 document.querySelector 了，用 ref，然后（至少要）在mounted函数里引用。