图片放大缩小拖拽

这里注意如果自己的页面有滚动条，一定阻止滚动事件的默认行为，否则缩放图片的时候，页面会跟着滚动
@mousewheel.prevent 阻止默认行为

<div span="8" class="left"  @mousewheel.prevent="rollImg">
   <img :src="imgUrl" alt="" class="img" ref="imgDiv" @mousedown="move">
</div>

JavaScript代码

// 拖动图片
        move(e) {
            e.preventDefault()
            // 获取元素
            var left = document.querySelector('.left')
            var img = document.querySelector('.img')
            var x = e.pageX - img.offsetLeft
            var y = e.pageY - img.offsetTop
            // 添加鼠标移动事件
            left.addEventListener('mousemove', move)
                    function move(e) {
                    img.style.left = e.pageX - x + 'px'
                    img.style.top = e.pageY -