（1）The plugin is introduced ----（插件介绍）

Offer H5, mobile gesture events, support vue2, VUe3 version, add and update framework encapsulation and custom data processing and automatic adaptation based on HammerJS, provide finger long press, drag, fast slide, multi-finger zoom, multi-finger rotation operations. （提供h5，移动端手势事件，支持vue2，vue3版本，基于hammerjs进行新增更新 框架封装和自定义数据的处理及自动适配，提供手指的长按、拖曳、快滑，多指缩放，多指旋转操作。）

（1-1）Use advice （使用建议）

1. It is recommended to add mobile meta limits to the project, otherwise it will conflict with gesture manipulation. Add downlink code to index.html
   建议给项目添加移动端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. When debugging project two-finger event operations such as pinch and rotate in the real machine, index.html adds downlink code to provide developer debug buttons in the real machine.
   在想真机中调试项目双指事件操作如（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）install ---- (安装)

• vue2

 npm install vue-hand-mobile

• vue3

 npm install vue3-hand-mobile

（3）import ----（引入）

Globally introduce the plug-in in the main entry file ----（在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）Use ---- （使用）

How to use it: On the dom or component columns you need by using the v-touch: gesture event ='callback'; EvenObject returns the event callback object argument, evenObject returns information down.

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

Vue2 column 1: Use the swipe gesture ---- （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 column 2: Use the drag left gesture ---- （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）Gesture events ---- (手势事件)

hand tap ---- (轻拍)

• tap：点击触发 -- (Click on the trigger)

This event is triggered when a finger taps or clicks. The touchscreen time is less than 250ms, similar to the CLICK event on a PC.
手指轻拍或点击时触发该事件，触屏 时间< 250ms，类似PC端的 click 事件。

Long press ---- （长按）

• press：长按500s时触发 -- (Trigger when long press 500s)
• pressup: 长按事件离开时触发 -- (Triggered when the long press event leaves)

Hold down the finger to trigger the event, and the touchscreen time is > 500ms.
手指长按触发该事件，触屏 时间 > 500ms。

Drag the ---- （拖动）

• pan：拖动时触发 -- (Trigger while dragging)
• panstart: 拖动开始 -- (Drag the start)
• panmove: 拖动过程 -- (Drag the move)
• panend: 拖动结束 -- (Drag the end)
• pancancel：拖动取消 -- (Drag cancelled)
• panleft：向左←拖动 -- (Left ← drag)
• panright：向右→拖动 -- (Right → drag)
• panup：向上↑拖动 -- (Drag up ↑)
• pandown：向下↓拖动 -- （Drag down ↓）

Finger drag specifies when the DOM is moved.
手指拖拽指定dom移动时触发。

Fast sliding ---- （快滑）

• swipe：快滑时触发 -- （Triggered during fast skiing）
• swipeleft：向左←快滑 --（Left ← Fast slide）
• swiperight：向右→快滑 -- （Right → Fast slide）
• swipeup：向上↑快滑 -- （Up ↑ Fast slide）
• swipedown：向下↓快滑 -- （Down ↓ Fast slide）

Finger fast slide operation triggered, is usually used most mobile phone sliding operation.
手指快滑操作时触发，是平时手机用到最多的滑动操作。

Two fingers zoom ---- (两指缩放)

• pinch：两个手指触摸缩放全过程 -- （Two fingers touching the whole process）
• pinchstart：两指触摸开始 -- （Two finger touches begin）
• pinchmove：两指触摸过程 -- （Two finger touch move）
• pinchend：两指触摸结束 -- （Two fingers touch end）
• pinchcancel：两指触摸取消 -- （Two finger touch cancelled）
• pinchin：两指触摸时两手指越来越近时 -- （Two fingers touch when the two fingers are getting closer together）
• pinchout：两指触摸时两手指越来越远时 -- （When you touch with two fingers and you move your fingers further apart）

Triggered when two fingers touch the screen, commonly used in zooming service scenarios.
两手指触屏等操作时触发，常见使用在缩放业务场景。

Two fingers rotate ---- (两指旋转)

• rotate ：两个手指触摸旋转全过程 -- （Two fingers touching the whole rotation）
• rotatestart：旋转开始 -- （rotation start）
• rotatemove：旋转过程 -- （rotation move）
• rotateend：旋转结束 -- （rotation end）
• rotatecancel：旋转取消 -- （rotation cancel）

（6）The callback function parameter evenObject API ---- (回调函数参数evenObject API)

中文 Chinese

| 属性名称 | 描述 | 是否默认返回 | |-----------|----------------------|----------------| | 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手势系列事件时返回 |

英语 English

| Name | Description | default return | |-----------|----------------------|----------------| | type | Gesture event name, for example, swipeup | true | | X | From where the touch screen starts, where the X-axis moves | true | | Y | From where you start the touch, where you move the Y axis | true | | velocityX | The velocity on the X-axis is px per ms | true | | velocityY | The velocity on the Y axis is px per ms | true | | direction | Direction of finger movement: 【None、left、right、top、Down】 | true | | distance | The distance between the start touch screen position and the current touch screen position | true | | touch_Time | The total time, in ms, since the start of a touch. The second touch time returns to 0 | true | | target | The object of the element that triggers the gesture event, such as dom, has a class name of Home | true | | eventType | The type of event that triggers the gesture:【start、move、end、cancel】| true | | pointers | An array of all touch position points, including the end touch point | true | | element | The DOM element that triggers the event and can be manipulated on the element | true | | scale | The PINCH series of two-finger pinch gestures returns a scale of 1 for each touch | Pinch gesture series events | | rotation | Rotate series Two-finger rotation gesture returns. The rotation Angle is 0 for each touch |Rotate returns the rotate gesture series event |