vue拖拽缩放图片

在项目中有图片缩放拖拽的功能，在此记录一下。
本质就是外面套个div，里面放图片，图片做绝对定位，超过大盒子的部分隐藏掉。
代码如下：
html部分：

 <div class="deckBigImg">
            <v-touch
              @pinchin="touchSmall"
              @pinchout="touchLarge"
            >
              <div
                class="moveImgBox"
                @mousewheel.prevent="rollImg"
              >
                <img
                  class="img"
                  :src="currentBigImg"
                  alt=""
                  :style="{transform: 'scale('+zoomD+')'}"
                  @mousedown="move"
                  @touchstart.stop="touchmove"
                />
              </div>
            </v-touch>
   </div>

script部分：

export default {
  data() {
    return {
      zoomD:1
      }
     }
    }

 // 移动
    move(e){
      e.preventDefault();
      var personBox= document.querySelector('.moveImgBox');
      var img = document.querySelector('.img');
      var x = e.pageX-img.offsetLeft;
      var y =e.pageY-img.offsetTop;
      // 添加鼠标移动事件
      personBox.addEventListener("mousemove",move);
      personBox.addEventListener("touchmove",move);
      function move(e){
        img.style.left=e.pageX-x+"px";
        img.style.top=e.pageY-y+"px";
      }
      img.addEventListener("mouseup",function(){
        personBox.removeEventListener("mousemove",move);
      })
      // 鼠标离开父元素，事件移除
      img.addEventListener("mouseout",function(){
        personBox.removeEventListener("mousemove",move)
      })
    },
    // 触屏移动
    touchmove(e){
 e.preventDefault();
      var personBox= document.querySelector('.moveImgBox');
      var img = document.querySelector('.img');
      var x = e.touches[0].pageX-img.offsetLeft;
      var y =e.touches[0].pageY-img.offsetTop;
      // 添加鼠标移动事件
       personBox.addEventListener("touchmove",touchmove);
      function touchmove(e){
        img.style.left=e.touches[0].pageX-x+"px";
        img.style.top=e.touches[0].pageY-y+"px";
      }
      img.addEventListener("touchstart",function(){
        personBox.removeEventListener("touchmove",touchmove);
      })
      // 鼠标离开父元素，事件移除
      img.addEventListener("touchend",function(){
        personBox.removeEventListener("touchmove",touchmove)
      })
    },
    // 缩放
    rollImg(e){
      let direction=e.deltaY>0?'down':'up';
      if(direction==='up'){
        // 滑轮向上滚动
        this.large();
      }else{
        // 滑轮向下移动
        this.small();
      }
    },
   
    // 放大
    large(){
      this.$nextTick(()=>{
        if(this.zoomD<6){
          this.zoomD+=0.10
        }
        document.querySelector('.img').style.transform=`matrix(${this.zoomD},0,0,${this.zoomD},0,0)`
      })
    },
    // 缩小
    small(){
      this.$nextTick(()=>{
        if(this.zoomD>0.3){
          this.zoomD-=0.10
        }
         document.querySelector('.img').style.transform=`matrix(${this.zoomD},0,0,${this.zoomD},0,0)`
      })
    },
    // 触屏放大
    touchSmall(){
       this.$nextTick(()=>{
        if(this.zoomD>0.3){
          this.zoomD-=0.01
        }
         document.querySelector('.img').style.transform=`matrix(${this.zoomD},0,0,${this.zoomD},0,0)`
      })
    },
    // 触屏缩小
    touchLarge(){
       this.$nextTick(()=>{
        if(this.zoomD<6){
          this.zoomD+=0.01
        }
        document.querySelector('.img').style.transform=`matrix(${this.zoomD},0,0,${this.zoomD},0,0)`
      })
    }
  },

样式：

.deckBigImg {
    width: 75%;
    height: 100%;
    border: 1px solid #7f839e;
    position: relative;
    overflow: hidden;
    background-color: #0c1f4a;
    position: relative;
}
.deckBigImg img {
    height: 80%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.moveImgBox {
    width: 100%;
    height: 100%;
}