vue实现图片引入鼠标控制移动滚轮缩放

html文本

<img id="themap" class="canClick" v-show="staff"   @mousedown="move"  @mousewheel.prevent="rollImg" ref="imgDiv"/>

js

methods:{
 // 拖动图片
move(e) {
    // 阻止默认事件
    e.preventDefault();
    // 获取元素
    var boxDom = document.querySelector(".map");
    var img = document.querySelector(".canClick");
    var x = e.pageX - img.offsetLeft;
    var y = e.pageY - img.offsetTop;
    // 鼠标移动事件
    boxDom.addEventListener("mousemove", move);
    function move(e) {
        img.style.left = e.pageX - x + "px";
        img.style.top = e.pageY - y + "px";
    }
    // 鼠标抬起移除事件
    img.addEventListener("mouseup", function () {
         boxDom.removeEventListener("mousemove", move);
    });
    // 鼠标离开移除事件
    boxDom.addEventListener("mouseout", function () {
          boxDom.removeEventListener("mousemove", move);
    });
},
// 缩放图片
rollImg(e) {
     let transform = this.$refs.imgDiv.style.transform
     let zoom = transform.indexOf("scale") != -1 ? +transform.split("(")[1].split(")")[0] : 1
     zoom += e.wheelDelta / 1200
     if (zoom > 0.1 && zoom < 5) {
           this.$refs.imgDiv.style.transform = "scale(" + zoom + ")"
     }
},
}