AlloyFinger是一款輕量級(jí)的手機(jī)端手勢(shì)庫(kù)，可以快速實(shí)現(xiàn)各種手勢(shì)操作。結(jié)合Vue，可以更方便地實(shí)現(xiàn)復(fù)雜的手勢(shì)操作邏輯。

首先，需要先引入AlloyFinger庫(kù)。

<script type="text/javascript" src="https://unpkg.com/alloyfinger/alloy_finger.min.js"></script>

在Vue組件中使用AlloyFinger，可以通過v-el指令給元素起一個(gè)別名，以便于在methods中調(diào)用。

<template>
<div id="box" ref="boxDiv"></div>
</template>
<script>
import AlloyFinger from 'alloyfinger'
export default {
mounted () {
this.$nextTick(() => {
new AlloyFinger(this.$refs.boxDiv, {
tap: this.handleTap,
doubleTap: this.handleDoubleTap,
rotate: this.handleRotate
})
})
},
methods: {
handleTap(e) {
console.log('tap')
},
handleDoubleTap(e) {
console.log('double tap')
},
handleRotate(e) {
console.log('rotate', e.angle)
}
}
}
</script>

在mounted鉤子函數(shù)中，通過this.$refs.boxDiv獲取DOM元素，然后通過new AlloyFinger()實(shí)例化一個(gè)手勢(shì)對(duì)象。在options參數(shù)中，可以指定需要監(jiān)聽哪些手勢(shì)事件。在methods中，可以編寫對(duì)應(yīng)的事件回調(diào)函數(shù)。

除了vue組件中使用外，還可以通過直接調(diào)用AlloyFinger()函數(shù)來給DOM元素綁定手勢(shì)事件。

<script>
import AlloyFinger from 'alloyfinger'
const boxDiv = document.querySelector('#box')
new AlloyFinger(boxDiv, {
swipe: function() {
console.log('swipe')
}
})
</script>

這樣，就可以在不使用框架的情況下，直接使用AlloyFinger給DOM元素添加手勢(shì)事件了。