vue-hand-mobile

（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"/>

1. 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