mengxianghan / vue-finger-directive

vue自定义手指指令(点击、单击、长按、双击、拖拽移动、多点触控、滑动、缩放、旋转)

vue-finger-directive

vue 自定义手势插件，基于腾讯AlloyFinger改造

Use Setup

npm i vue-finger-directive -S

在main.js中导入、vue.use()，然后在子组件中就可以直接用v-tap="{methods：func , arg: args}"的方式使用

Use in SPA

1.点击事件

v-tap

2.单击事件，和tap的区别是相差250ms

v-singleTap

3.长按事件，当点击时长超过750ms时候触发

v-longTap

4.双击事件

v-doubleTap

5.拖拽移动事件

v-pressMove

6.多点触控事件开始事件

v-multipointStart

7.多点触控事件结束事件

v-multipointEnd

8.滑动事件

v-swipe

9.旋转事件

v-rotate

10.缩放事件

v-pinch

Example

<div
  :style="floatStyle"
  class="floating"
  v-pressMove="{methods: pressMove }"
  ref="floating"
  v-tap="{methods: tap, arg: {index: 1, item:{name: "name", value: "value"}} }"
>
methods: {
  pressMove(){
    
  },
  tap(e, arg){
    console.log('arg', arg)
  }
}