Quasar 提供了功能齐全的 Vue 指令，可以完全替代 Hammerjs 等库：v-touch-pan、v-touch-swipe、v-touch-hold 甚至 v-touch-repeat。

这些指令也适用于鼠标事件，而不仅仅是触摸事件，因此您也可以为桌面应用程序构建酷炫的功能。

我们将在下面的行中描述 v-touch-hold 指令。

用法

默认等待时间为 600 毫秒，但您可以更改它。

但是，您也可以更改此灵敏度（请注意下面的指令参数 - 600:12:15 - 600 毫秒等待时间，触摸事件灵敏度为 12px，鼠标事件灵敏度为 15px）。

处理鼠标事件

当您也想要处理鼠标事件时，请使用 mouse 修饰符。

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

禁止 TouchHold

当您想要禁止 TouchHold 时，可以通过阻止内部内容的 touchstart / mousedown 事件传播来实现。

<div v-touch-hold.mouse="userHasHold">
  <!-- ...content -->
  <div @touchstart.stop @mousedown.stop>
    <!--
      TouchHold will not apply here because
      we are calling stopPropagation() on touchstart
      and mousedown events
    -->
  </div>
  <!-- ...content -->
</div>

但是，如果您使用 capture 或 mouseCapture 修饰符，则事件将首先到达 TouchHold 指令，然后到达内部内容，因此 TouchHold 仍将触发。

关于 HMR 的说明

出于性能原因，并非所有修饰符都是响应式的。有些需要刷新窗口/页面/组件才能更新。请查看 API 卡以了解未标记为响应式的修饰符。