Vue.use(AlloyFingerVue)这种在main.js里面根本无法引入，

import AlloyFinger from './lib/alloy_finger'
import AlloyFingerVue from './lib/af'
//上面的就是那个为vue专门配置的js文件
Vue.use(AlloyFingerVue)

这是报错

Uncaught Error: you need include the AlloyFinger!
    at Object.install (eval at <anonymous> (app.js:1099), <anonymous>:15:15)
    at Function.Vue.use (eval at <anonymous> (app.js:1047), <anonymous>:3433:22)
    at eval (eval at <anonymous> (app.js:812), <anonymous>:23:45)
    at Object.<anonymous> (app.js:812)
    at __webpack_require__ (app.js:654)
    at fn (app.js:84)
    at Object.<anonymous> (app.js:1133)
    at __webpack_require__ (app.js:654)
    at app.js:701

导入报错

• import导入报错

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

• require还是报错

import Vue from 'vue'
import AlloyFinger from 'alloyfinger'
const AlloyFingerPlugin =  require('alloyfinger/vue/alloy_finger.vue.js')
Vue.use(AlloyFingerPlugin, {
  AlloyFinger
})

导入报错原因截图

控制台报错信息

vue.runtime.esm.js?2b0e:587 [Vue warn]: Failed to resolve directive: finger

结论

vue导出有问题

感谢团队的分享，AlloyFinger非常好用，但是我发现一个关于pinch的问题。 我在vue中通过v-finger:pinch添加了手势，但是发现pinch的手势在第一次也就是两根手指按下的时候就已经触发了，这导致了当图片比较大的时候，缩小变得困难（两根手指刚触摸到手机时已经触发了一次pinch的事件，导致图片又变大），理想的情况应该是手指移动的时候才会触发。

希望给予解决的思路，谢谢。

现在 npm 社区的主流实践是：源代码可以用 es6 来开发，但发布到 npm 的时候，一定要同时提供 babel 编译后的版本（用 prepare 钩子脚本的方式），确保能被绝大部分项目直接使用，而无需在这些项目中去编译

原因是：1. 很多服务器端项目使用的 node.js 版本不支持原生 es6。2. 很多客户端项目是基于 webpack + babel-loader 的，最佳实践是在编译时忽略 node_modules 的文件：

https://github.com/babel/babel-loader#babel-loader-is-slow

see title.

Maybe a function to call functions would solve the issue:

call: function (method) {
return typeof this[method] === 'function' ? this[method]() : false;
}

If somebody ever moved his finger somewhere and (maybe not intended)back to the first place, in this condition, I think he will not want to dispatch the tap event.So, I added the ever moved condition. Hope to take my advice. 如果某人把手指移动到了某个地方后又(可能无意识的)移动回了初始触摸点附近，在这种情况下，他可能并不想触发tap事件，所以我添加了对这种情况的判断。代码中以10px为临界点，是因为觉得30px有点大。希望能合并我的代码。

vue2的传参问题

当我给事件绑定了

<div 
    v-finger:tap="tap('我是参数')"
</div>

methods: {
	tap: function(e) { console.log(e)}
 }

那么这样的这个tap事件当我一进入页面的时候就会被触发（在chrome模拟的移动端设备）。再点击的话，j就再也触发不了tap事件了。

when you do something like: this.rotate.del(); sometimes this.rotate can be null

I think it should check for existence before try to delete anything like:

           if (this.rotate) this.rotate.del();
           if (this.touchStart) this.touchStart.del();
           if (this.multipointStart) this.multipointStart.del();
           if (this.multipointEnd) this.multipointEnd.del();
           if (this.pinch) this.pinch.del();
           if (this.swipe) this.swipe.del();
           if (this.tap) this.tap.del();
           if (this.doubleTap) this.doubleTap.del();
           if (this.longTap) this.longTap.del();
           if (this.singleTap) this.singleTap.del();
           if (this.pressMove) this.pressMove.del();
           if (this.touchMove) this.touchMove.del();
           if (this.touchEnd) this.touchEnd.del();
           if (this.touchCancel) this.touchCancel.del();

一个绑定了v-finger:swipe的router-view有一个动态子组件：

<router-view v-finger:swipe="handleSwipe">
    <component :is="componentName"></component>
</router-view>

（这部分代码只表示<router-view>和<component>的嵌套关系，当然实际上不是这么写的）

当v-bind:is的组件名改变之后，swipe就失效了。 不仅如此我还试着用v-finger:touch-move代替（简单代替）swipe，也失效了。

我发现到，当component:is发生改变时，这个router-view所指向的元素的touch事件都丢失了

↑ before

↑ after

实际上，我也不知道是不是动态组建变更造成这个问题。 🤦‍♂️

In template we can use v-finger:tap="handleTap"

In render function using createElement

{
 directives: [
       {
         name: 'finger',
         expression: 'handleTap',
         arg: 'tap',
       }
   ]
}

is not working...

近来在学习该项目的源码，有一个地方不太理解。 为什么 AlloyFinger 在初始化的时候

window.removeEventListener('scroll', this._cancelAllHandler); // 这里为什么要 remove 呢？有其他情况会引起重复定义吗？
window.addEventListener('scroll', this._cancelAllHandler);

原版在页面滚动时（scroll）取消了 touch 相关事件的监听 ` this._cancelAllHandler = this.cancelAll.bind(this); window.addEventListener('scroll', this._cancelAllHandler);

cancelAll: function () { this._preventTap = true clearTimeout(this.singleTapTimeout); clearTimeout(this.tapTimeout); clearTimeout(this.longTapTimeout); clearTimeout(this.swipeTimeout); }, `

react 版里没有做同样的事情 ` _handleTouchCancel(evt) { this._emitEvent('onTouchCancel', evt); clearInterval(this.singleTapTimeout); clearInterval(this.tapTimeout); clearInterval(this.longTapTimeout); clearInterval(this.swipeTimeout); }

render() { return React.cloneElement(React.Children.only(this.props.children), { onTouchStart: this._handleTouchStart.bind(this), onTouchMove: this._handleTouchMove.bind(this), onTouchCancel: this._handleTouchCancel.bind(this), onTouchEnd: this._handleTouchEnd.bind(this) }); }

`