vue移动端使用手势库---alloytinger

操作图片拖拽、缩放、长按

1. 下载

	npm i alloyfinger --save

2. 使用（全局注册）

	// main.js
	import AlloyFinger from 'alloyfinger'
	import AlloyFingerPlugin from 'alloyfinger/vue/alloy_finger_vue'
	 
	Vue.use(AlloyFingerPlugin,{
	  AlloyFinger
	})

3. 使用

	<div v-finger:pinch="pinchHandler"
	     v-finger:press-move="pressMoveHandler"
	     v-finger:multipoint-start="multipointStartHandler"
	     v-finger:rotate="rotateHandler"
	     v-finger:tap="tapHandler"
	     v-finger:multipoint-end="multipointEndHandler"
	     v-finger:double-tap="doubleTapHandler"
	     v-finger:long-tap="longTapHandler"
	     v-finger:swipe="swipeHandler"
	     v-finger:single-tap="singleTapHandler">
	div>

4. 说明

1. pinchHandler(e) {
   //e.scale代表两个手指缩放的比例
   },
2. pressMoveHandler(e) {
   //e.deltaX和e.deltaY代表在屏幕上移动的距离
   console.log(e.deltaX);
   console.log(e.deltaY);
   },
3. multipointStartHandler：一个手指以上触摸屏幕触发
4. rotateHandler(e) { // e.angle代表两个手指旋转的角度 },
5. tapHandler(e) { // 点按触发 },
6. multipointEndHandler：当手指离开，屏幕只剩一个手指或零个手指触发
7. doubleTapHandler(e) { // 双击屏幕触发 }
8. longTapHandler(evt) { //长按屏幕750ms触发 }
9. swipeHandler(e) {
   //e.direction代表滑动的方向
   console.log(“swipe” + evt.direction);
   },
10. singleTapHandler(evt) ： 单击