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

我心飞翔 分类:vue

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

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

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

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

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

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

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

回复

我来回复
  • 暂无回复内容