vue自定义指令实现长按功能

​最近在做一个仿微信的实时通讯工具，前端用vue和有赞vant开发的h5应用。

最近加了一个新的需求，要求有消息的撤回功能，长按自己发送的消息，弹出撤销框，点击撤销框可以撤销自己发送的消息。 ​

这个移动端的长按功能vue并没有原生支持，而是需要组合touchstart和touchend两个事件一起才能完成。

具体原理就是手指按下的时候触发定时器，当手指抬起的时候关闭定时器。在一定的时间内（800毫秒）如果没有抬起则认为是长按需要触发长按操作逻辑。

这里不仅需要两个事件。而且还需要引入额外的变量，也就是定时器。这些都是与业务无关的，如果代码写在业务组件里面，虽然也可以实现，但是代码看着不够简洁。

这里我们可以利用vue提供的自定义指令的能力，自己定义一个longpress的指令，并在bind函数中绑定touchstart和touchend事件，把定时器的逻辑写在bind函数中。至于具体的长按逻辑则由外部传递进来，通过bind函数的入参拿到。

最后需要长按指令的组件我们可以使用v-longpress="myfunc"来方便的使用起来