长按指令

类星体提供了功能齐全的 Vue 指令，可以完全取代像Hammerjs这样的库:v-touch-pan, v-touch-swipe, v-touch-hold，甚至v-touch-repeat。

这些指令不仅可以处理鼠标事件，还可以处理触摸事件，所以您可以用它们在您的 App 中完成一些很酷的事情。

下面我们将讲述v-touch-hold指令

TouchHold API

用法

默认的长按等待时间为 600ms，但是您可以配置它：

但是，您也可以改变这个灵敏度(注意下面示例中的指令参数- 600:12:15 - 600ms 等待时间，触摸事件 12px 灵敏度，鼠标事件 15px 灵敏度)

处理鼠标事件

如果您也想处理鼠标事件，请使用鼠标修饰符：

<div v-touch-hold.mouse="userHasHold">...</div>

Inhibiting TouchHold

您可以通过阻止内部元素touchstart/mousedown事件的冒泡行为来抑制长按事件。

<div v-touch-hold.mouse="userHasHold">
  <!-- ...content -->
  <div @touchstart.stop @mousedown.stop>
    <!--
      长按事件不会应用到这里， 因为我们
      在 touchstart 和 mousedown 事件上
      调用了 stopPropagation()
    -->
  </div>
  <!-- ...content -->
</div>

然而，若您使用capture 或者 mouseCapture修饰符，则事件会先到达 TouchHold 指令，然后才是内部元素，所以 TouchHold 事件仍然会被触发。

注意热更新相关

由于性能的原因，不是所有的修饰符都是 reactive 的，有一些需要刷新页面才能更新，请在 API 卡片中检查的哪些修饰符不具备 reactive