vue vue-touch移动端手势详解

1、安装

cnpm install vue-touch@next --save

2、引入

在main.js中

import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})  v-touch可以是自定义名称

3、使用

Vue.use注册的name名称,默认该标签为div

  • v-touch 

(1)替换标签

tag="要变成的标签名称,默认为div"

(2)定义手势

@事件类型='回调' 

(3)配置手势事件选项

:小写事件类型名称-options="{ direction: 'horizontal', threshold: 100 }

  • threshold临界值
  • directions方向: 'up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all'
  • 具体配置查看hammerjs

(4)阻止/触发手势

:enabled="true/false"   

允许/禁止所有的手势

:enabled="{ pinch: true, rotate: false }"  

允许和禁止指定手势

(5)公共组件方法

1、通过ref获取到该标签

2、在方法中

this.$refs.tapper.disable('tap')

公共方法

  • disable('手势名称') 
  • enable('手势名称') 
  • toggle('手势名称') 
  • disableAll() disable all Recognizers
  • enableAll() enable all Recognizers
  • isEnabled('手势名称') 

(6)自定义手势

在main.js中,在Vue.use之前使用

VueTouchVueTouch.registerCustomEvent('doubletap', {
  type: '手势名称',
  ...手势事件的配置选项,见(3)
  taps: 2  对应tap手势的触发点击次数配置
})
> ...

4、事件类型

Pan平移 

  • pan
  • panstart
  • panmove
  • panend
  • pancancel
  • panleft
  • panright
  • panup
  • pandown

Pinch缩放 

  • pinch
  • pinchstart
  • pinchmove
  • pinchend
  • pinchcancel
  • pinchin
  • pinchout 

Press按压 

  • press
  • pressup 

Rotate旋转 

  • rotate
  • rotatestart
  • rotatemove
  • rotateend
  • rotatecancel

Swipe滑动 

  • swipe
  • swipeleft
  • swiperight
  • swipeup
  • swipedown

Tap点击 

  • tap

代码示例

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

你可能感兴趣的:(vue vue-touch移动端手势详解)