参考链接: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)
<a
  v-hammer:tap="onTap"
  v-hammer:pan:horizontal="onPanHorizontal"
  v-hammer:panstart="onPanStart"
  v-hammer:panend="onPanEnd"
  v-hammer:press="onPress"
  v-hammer:pressup="onPressup"
></a>
// 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() 方法

Logo

前往低代码交流专区

更多推荐