chat/_src/mixins/touch.js

import Hammer from 'hammerjs'

export const HammerMixins = {
  data () {
    return {
      hammerManager: null,
      hasHammertap: false,
      hasHammerPan: false,
      hasHammerPinch: false
    }
  },
  methods: {
    initHammerTargrt (target, { tap, pan, pinch }) {
      this.hammerManager = new Hammer.Manager(target)
      const hammerTap = new Hammer.Tap({ pointers: 1 })
      const hammerPan = new Hammer.Pan({ pointers: 1 })
      const hammerPinch = new Hammer.Pinch({ pointers: 2 })
      let opts = []

      this.hasHammertap = tap
      this.hasHammerPan = pan
      this.hasHammerPinch = pinch

      if (tap) opts.push(hammerTap)
      if (pan) opts.push(hammerPan)
      if (pinch) opts.push(hammerPinch)

      this.hammerManager.add(opts)

      this.initHammerEvent()
    },
    initHammerEvent () {
      // 监听-tab
      if (this.hasHammertap) {
        this.hammerManager.on(`tap`, (ev) => {
          ev.preventDefault()
          this.visible = false
        })
      }

      // 监听-拖拽
      this.hammerManager.on(`panstart panmove panend tap, multitap`, (ev) => {
        ev.preventDefault()
      })

      // 监听-缩放
      this.hammerManager.on(`pinchmove pinchin pinchout pinchend`, (ev) => {
        ev.preventDefault()
      })
    }
  }
}