hammerJs 在vue里简单的使用

参考链接：https://www.jianshu.com/p/0b0b9364f967
git链接：https://github.com/bsdfzzzy/vue2-hammer

请保证vue 2.0以上
查看vue版本：vue -V

npm

npm install vue2-hammer

main.js

import { VueHammer } from 'vue2-hammer'
Vue.use(VueHammer)

// change the threshold for all swipe recognizers
VueHammer.config.swipe = {
  threshold: 200
};

1. tap
   在指定的 DOM 区域内，一个手指轻拍或点击时触发该事件（类似 PC 端的 click），该事件最大点击时间为 250ms，如果超过 250ms 则按 press 事件处理

2. press
   在指定的 DOM 区域内，这个事件相当于 PC 端的 Click 事件，不能包含任何的移动，最小按压时间为 500ms，常用于我们在手机上用的复制粘贴等功能
   该事件事分别对以下事件进行监听并处理

   pressup: 点击事件离开时触发

3. pan
   在指定的 DOM 区域内，一个手指放下并移动事件，即触屏中的拖动事件
   该事件事分别对以下事件进行监听并处理

   panstart: 拖动开始
   panmove: 拖动过程
   panend: 拖动结束
   pancancel: 拖动取消
   panleft: 向左拖动
   panright: 向右拖动
   panup: 向上拖动
   pandown: 向下拖动

4. swipe
   在指定的 DOM 区域内，一个手指快速的在触屏上滑动，即平时用到最多的滑动事件
   该事件事分别对以下事件进行监听并处理

   swipeleft: 向左滑动
   swiperight: 向右滑动
   swipeup: 向上滑动
   swipedown: 向下滑动

5. pinch
   在指定的 DOM 区域内，两个手指（默认为两个手指，多指触控需要单独设置）或多个手指相对（越来越近）移动或相向（越来越远）移动时事件
   该事件事分别对以下事件进行监听并处理

   pinchstart: 多点触控开始
   pinchmove: 多点触控过程
   pinchend: 多点触控结束
   pinchcancel: 多点触控取消
   pinchin: 多点触控时两手指越来越近
   pinchout: 多点触控时两手指越来越远

6. rotate
   在指定的 DOM 区域内，当两个手指或更多手指呈圆型旋转时触发
   该事件事分别对以下事件进行监听并处理

   rotatestart: 旋转开始
   rotatemove: 旋转过程
   rotateend: 旋转结束
   rotatecancel: 旋转取消
   事件对象

Name
Value

type
事件的名称，例如 panstart

deltaX
X 轴移动

deltaY
Y 轴移动

deltaTime
自从第一次 input 的总时间，单位 ms

distance
移动距离

angle
角度

velocityX
X 轴上的速度，单位为 px/ms

velocityY
Y 轴上的速度，单位为 px/ms

velocity
velocityX/velocityY 的最高值

direction
移动方向，匹配 DIRECTION 常量

offsetDirection
相对于起点的方向，匹配 DIRECTION 常量

scale
在多点触摸缩放时，只是触摸时值为 1

rotation
在多点触摸旋转时，只是触摸时值为 0

center
多点触摸的中心位置，或者只是单独的点

srcEvent
源事件对象，类型为 TouchEvent，MouseEvent 或 PointerEvent

target
收到该事件的目标

pointerType
主要点类型，可能是 touch，mouse，pen 或 kinect

eventType
事件类型，匹配 INPUT 常量

isFirst
第一个 input 时为 true

isFinal
最后一个 input 时为 true

pointers
所有点的数组，包括结束点（touchend，mouseup）

changedPointers
包含所有 new/moved/lost 的点

preventDefault
参考 srcEvent.preventDefault() 方法