操作圖片拖拽、縮放、長按

下載

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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。