关于vue项目，手机端实现双指控制图片缩放

<template>
  <div>
    <img src="../../assets/安全协议.png" :alt="alt" @click="open()" style="width: 100%;height: 100%" title="点击查看图片" :id="'vc-imgself-img-'+attach">
    <div class="full-img" v-if="show">
      <div @click="on"  draggable="false" >
        <img src="../../assets/安全协议.png" id="image" alt="" style="width: 100%" class="img-state" :alt="alt || ''">
      </div>
      <div class="btns">
        <button type="button" name="button" class="btn btn-primary" @click="close()" :id="'vc-imgself-close-'+attach">关闭</button>
      </div>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'


  export default {
    props: {
      src: {
        type: String
      },
      width: {
        default: 60
      },
      height: {
        default: 60
      },
      alt: {
        default: ''
      },
      attach: {
        type: String,
        default: 'name'
      }
    },
    data () {
      return {
        show: false,
        deg: 0,
        power: 1
      }
    },
    methods: {
      open () {
        this.deg = 0
        this.power = 0.5
        this.show = true
      },
      close () {
        this.show = false
      },
      on(){
        $(function (){
          let result = {}
          var eleImg = document.querySelector('#image');
          var store = {
            scale: 1
          };
          // 缩放处理
          eleImg.addEventListener('touchstart', function (event) {
            var touches = event.touches;
            var events = touches[0];
            var events2 = touches[1];

            var x = eleImg.offsetLeft;
            var y = eleImg.offsetTop;

            if (!events) {
              return;
            }
            event.preventDefault();
            // 第一个触摸点的坐标
            store.pageX = events.pageX;
            store.pageY = events.pageY;
            store.x = x;
            store.y = y;
            store.moveable = true;
            if (events2) {
              store.pageX2 = events2.pageX;
              store.pageY2 = events2.pageY;
            }
            store.originScale = store.scale || 1;
          },{ passive: false });
          document.addEventListener('touchmove', function (event) {
            if (!store.moveable) {
              return;
            }
            event.preventDefault();
            var touches = event.touches;
            var events = touches[0];
            var events2 = touches[1];
            result.textContent = '触摸点数量：' + touches.length;
            if (events2) {
              if (!store.pageX2) {
                store.pageX2 = events2.pageX;
              }
              if (!store.pageY2) {
                store.pageY2 = events2.pageY;
              }
              var getDistance = function (start, stop) {
                return Math.hypot(stop.x - start.x, stop.y - start.y);
              };
              var zoom = getDistance({
                  x: events.pageX,
                  y: events.pageY
                }, {
                  x: events2.pageX,
                  y: events2.pageY
                }) /
                getDistance({
                  x: store.pageX,
                  y: store.pageY
                }, {
                  x: store.pageX2,
                  y: store.pageY2
                });
              var newScale = store.originScale * zoom;
              if (newScale > 4) {
                newScale = 4;
              }
              store.scale = newScale;
              eleImg.style.transform = 'scale('+ newScale +')';
              result.textContent = 'zoom: '+ zoom + ', apply scale: ' + newScale;
            }else{
              var moveX = events.pageX - store.pageX;
              var moveY = events.pageY - store.pageY;
              var imagetop = store.x + moveX;
              var imageleft = store.y + moveY;
              $('#image').css({'margin-top':imageleft+'px','left':imagetop+'px'});
            }
          },{ passive: false });

          document.addEventListener('touchend', function () {
            store.moveable = false;

            delete store.pageX2;
            delete store.pageY2;
          },{ passive: false });
          document.addEventListener('touchcancel', function () {
            store.moveable = false;
            delete store.pageX2;
            delete store.pageY2;
          },{ passive: false });
        });
      }

    },
    ready(){
      // this.src="../../assets/安全协议.png"
    }
  }
</script>
<style media="screen">
  .full-img {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: rgba(0,0,0,0.8);
    display: flex;
    overflow: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
  .btns {
    position: fixed;
    bottom: 100px;
    height: auto;
  }
  .btns button {
    margin-right: 20px;
  }
  .img-state {

  }
</style>