vue移动端双指缩放

data （） {
return{
  displacement: {},
  scale: 1
}
},
mounted () { 
this.zoomMobile()
},
methods {
// 手机端双指缩放
    zoomMobile () {
      const that = this
      this.$nextTick(() => {
        const matrixBox = document.querySelector('.boxBg') // 获取放大缩小的区域DOM

        matrixBox.addEventListener('touchstart', function (event) {
          const touches = event.touches
          const events = touches[0]
          const events2 = touches[1]

          // 第一个触摸点的坐标
          that.displacement.pageX = events.pageX
          that.displacement.pageY = events.pageY

          that.displacement.moveable = true

          if (events2) {
            that.displacement.pageX2 = events2.pageX
            that.displacement.pageY2 = events2.pageY
          }

          that.displacement.originScale = that.displacement.scale || 1
        })

        document.addEventListener('touchmove', function (event) {
          if (!that.displacement.moveable) {
            return
          }

          event.preventDefault()

          const touches = event.touches
          const events = touches[0]
          const events2 = touches[1]
          // 双指移动
          if (events2) {
            // 第2个指头坐标在touchmove时候获取
            if (!that.displacement.pageX2) {
              that.displacement.pageX2 = events2.pageX
            }
            if (!that.displacement.pageY2) {
              that.displacement.pageY2 = events2.pageY
            }

            // 双指缩放比例计算
            const zoom =
              that.getDistance(
                { x: events.pageX, y: events.pageY },
                { x: events2.pageX, y: events2.pageY }
              ) /
              that.getDistance(
                { x: that.displacement.pageX, y: that.displacement.pageY },
                { x: that.displacement.pageX2, y: that.displacement.pageY2 }
              )

            let newScale = that.displacement.originScale * zoom // 计算应用的缩放比例
            // 最大缩放比例限制
            if (newScale > 5) {
              newScale = 5
            }
            // 最小缩放比例哦限制
            if (newScale < 0.2) {
              newScale = 0.2
            }
            // 记住使用的缩放值
            that.displacement.scale = newScale
            // DOM应用缩放效果
            matrixBox.style.transform = 'scale(' + newScale + ')'
            // 设置旋转元素的基点位置
            matrixBox.style.transformOrigin = 'left top'
          }
        })
      })
    },
    getDistance (start, stop) {
      return Math.hypot(stop.x - start.x, stop.y - start.y)
    }
}

}

}

或   使用 easyscroller

npm i easyscroller --save

beforeDestroy () {
      this.scroller.destroy()
    
  },
mounted () {
 this.$nextTick(() => {
        const easyScroller = require('easyscroller')
         const ele = document.querySelector('.boxBg')
         this.scroller = new easyScroller.EasyScroller(ele, {
          scrollingX: true,
           scrollingY: true,
           zooming: true,
           minZoom: 0.2,
           maxZoom: 5,
           zoomLevel: 1,
           bouncing: false
         })
       })
}