说实话，移动端手势操作现在是越来越重要了你懂的。

咱就是说以前我们只用考虑鼠标点击事件，现在可好，手指头一动就Neng搞出大新闻。

哈哈，这个标题是不是挺吸引人的？

AlloyFinger 是腾讯 AlloyTeam 开源的一个轻量级手势库，据说非常牛。

它Neng帮我们轻松识别各种手势，比如 tap、swipe、pinch、rotate 等等。

你得安装它。

npm install alloyfinger

然后在你的 Vue 项目入口文件里注册插件。

// 引入 alloy-finger import AlloyFinger from 'alloyfinger' import AlloyFingerPlugin from 'alloyfinger/vue/alloyfingervue' Vue.use(AlloyFingerPlugin, { AlloyFinger })

这样全局就Ke以在任意组件的模板里使用 v-finger 指令了。

hen简单，给需要绑定手势的元素加上 v-finger:事件名="方法名" 就行了。

<div v-finger:tap="onTap" v-finger:swipe="onSwipe">可触摸区域</div>

指令名v-finger

修饰符冒号后面是事件类型，如 tapswipe 等等。

值当前 Vue 实例上的方法名，与普通 @click 一样写在 methods 里即可。

需要传参时在方法里接收事件对象即可，比如 swipe 中的 evt.direction.

v-finger 的实现原理其实并不复杂，底层还是基于原生的 touch 事件封装。

this.element.addEventListener; this.element.addEventListener; this.element.addEventListener; this.element.addEventListener;

在 start、move、end 里Zuo各种计算和判断，Zui终得出用户到底Zuo了什么手势操作。

// 向量长度 function getLen { return Math.sqrt; } // 缩放：当前两指距离 / 起始两指距离 evt.zoom = getLen / this.pinchStartLen; // 旋转：当前向量相对上一帧向量的角度 evt.angle = getRotateAngle;

不对不对，应该是说 AlloyFinger 的实现Ke以拆成两层：底层手势识别和 Vue 指令封装。害！

AlloyFinger 是一个非常实用的移动端手势库，Neng大大简化我们的开发工作。

&# x3C ;template> &# x3C ;div class = "touch-area" v-finger:tap = "tap" v-finger:long-tap = "longTap" v-finger:swipe = "swipe" v-finger:pinch = "pinch" v -finger:rotate = "rotate"> &# x3C ;div> 点我、长按、滑动或双指操作 &# x3C ;/div> &# x3C ;/div> &# x3C ;/template>

是不是hen简单？ 你甚至Ke以在同一个元素上绑定多个手势事件，互不干扰。咱就是说这也太爽了吧！