开发h5时候，不管是vue2或vue3版本，安装该手势对应版本插件，然后就实现了对dom的拖拽缩放，和一些快滑功能。

GitHub源码：https://github.com/13977497716/vue-hand-mobile

（1）插件介绍

（提供h5，移动端手势事件，支持vue2，vue3版本，基于hammerjs进行新增更新 框架封装和自定义数据的处理及自动适配，提供手指的长按、拖曳、快滑，多指缩放，多指旋转操作。）

（1-1）使用建议

1. 建议给项目添加移动端meta限制，否则和手势操作有冲突，index.html添加下行代码

 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0,minimum-scale=1.0"/>

2. 在想真机中调试项目双指事件操作如（pinch、rotate ）时，index.html添加下行代码可在真机中提供开发者调试按钮。

<script  src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script>let vPrint = new  VConsole();</script>

（2）安装

• vue2

 npm install vue-hand-mobile

• vue3

 npm install vue3-hand-mobile

（3）引入

在main入口文件全局引入插件。

• Vue2

import Vue from 'vue'
import touch from 'vue-hand-mobile'
Vue.use(touch)

• Vue3

import { createApp } from 'vue'
import App from './App.vue'
const app=createApp(App)

import touch from 'vue3-hand-mobile'
app.use(touch)

（4）使用

（使用方法：在需要的dom或组件实列上通过使用指令v-touch:手势事件=‘callback’；返回事件的回调函数对象参数evenObject，evenObject具体返回信息往下） 。

vue2实列一：使用快滑手势

<template>
<div>
  <div class="kuai" v-touch:swipe="vue2action">TouchAction</div>
</div>
</template>

<script>
export default {

  methods:{
    vue2action(evenObject){
        console.log(evenObject);
    }
  }，

}
</script>

vue3实列二：使用向左拖动手势

<template>
  <div class="kuai" v-touch:panleft="leftAction">TouchAction</div>
</template>

<script>
export default {

  setup(){

     function leftAction(evenObject){
         console.log(evenObject);
     }
     return { leftAction }
    
  }，

}
</script>

（5）手势事件

轻拍

• tap：点击触发

手指轻拍或点击时触发该事件，触屏 时间< 250ms，类似PC端的 click 事件。

长按

• press：长按500s时触发
• pressup: 长按事件离开时触发

手指长按触发该事件，触屏 时间 > 500ms。

拖动

• pan：拖动时触发
• panstart: 拖动开始
• panmove: 拖动过程
• panend: 拖动结束
• pancancel：拖动取消
• panleft：向左←拖动
• panright：向右→拖动
• panup：向上↑拖动
• pandown：向下↓拖动

手指拖拽指定dom移动时触发。

快滑

• swipe：快滑时触发
• swipeleft：向左←快滑
• swiperight：向右→快滑
• swipeup：向上↑快滑
• swipedown：向下↓快滑

手指快滑操作时触发，是平时手机用到最多的滑动操作。

两指缩放

• pinch：两个手指触摸缩放全过程
• pinchstart：两指触摸开始
• pinchmove：两指触摸过程
• pinchend：两指触摸结束
• pinchcancel：两指触摸取消
• pinchin：两指触摸时两手指越来越近时
• pinchout：两指触摸时两手指越来越远时

两手指触屏等操作时触发，常见使用在缩放业务场景。

两指旋转

• rotate ：两个手指触摸旋转全过程
• rotatestart：旋转开始
• rotatemove：旋转过程
• rotateend：旋转结束
• rotatecancel：旋转取消

（6）回调函数参数evenObject API

属性名称	描述	是否默认返回
type	手势事件名，如swipeup	true
X	距开始触屏位置，X轴移动的位置	true
Y	距开始触屏位置，Y轴移动的位置	true
velocityX	X 轴上的速度，单位为 px/ms	true
velocityY	Y 轴上的速度，单位为 px/ms	true
direction	手指移动的方向,值有【none、left、right、top、down】	true
distance	距开始触屏位置，到当前触屏位置之间的距离	true
touch_Time	距开始触摸时的总时间，单位 ms。第二次触摸时间归0重计	true
target	触发手势事件的元素目标，如dom的class名为Home	true
eventType	触发手势事件的类型，值有【start、move、end、cancel】	true
pointers	所有触摸位置点的数组，包括结束触摸点	true
element	触发事件的dom元素,可对元素进行操作	true
scale	pinch系列两指缩放手势返回，缩放时的比列，每次触摸值都为1	pinch手势系列事件时返回
rotation	rotate系列两指旋转手势返回，旋转的角度，每次触摸值都为0	rotate手势系列事件时返回