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

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

下载

npm i alloyfinger --save

使用（全局注册）

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

使用

<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>

说明

pinchHandler(e) {
//e.scale代表两个手指缩放的比例
},

pressMoveHandler(e) {
//e.deltaX和e.deltaY代表在屏幕上移动的距离
console.log(e.deltaX);
console.log(e.deltaY);
},

multipointStartHandler：一个手指以上触摸屏幕触发

rotateHandler(e) { // e.angle代表两个手指旋转的角度 },

tapHandler(e) { // 点按触发 },

multipointEndHandler：当手指离开，屏幕只剩一个手指或零个手指触发

doubleTapHandler(e) { // 双击屏幕触发 }

longTapHandler(evt) { //长按屏幕750ms触发 }

swipeHandler(e) {
//e.direction代表滑动的方向
console.log(“swipe” + evt.direction);
},

singleTapHandler(evt) ： 单击

总结

以上是生活随笔为你收集整理的vue移动端使用手势库---alloytinger的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。