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

¥Quasar offers full-featured Vue directives that can totally replace libraries like Hammerjs: v-touch-pan, v-touch-swipe, v-touch-hold and even v-touch-repeat.

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

¥These directives also work with mouse events, not only touch events, so you are able to build cool functionality for your App on desktops too.

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

¥We will be describing v-touch-hold directive on the lines below.

用法(Usage)

¥Usage

默认等待时间为 600 毫秒，但你可以更改：

¥The default wait time is 600ms, but you can change it:

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

¥However, you can change this sensitivity too (notice the directive argument below - 600:12:15 - 600ms wait time, 12px sensitivity for touch events, 15px sensitivity for mouse events):

处理鼠标事件(Handling Mouse Events)

¥Handling Mouse Events

当你还想处理鼠标事件时，请使用 mouse 修饰符：

¥When you want to also handle mouse events too, use the mouse modifier:

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

禁止 TouchHold(Inhibiting TouchHold)

¥Inhibiting TouchHold

当你想抑制 TouchHold 时，可以通过停止从内部内容传播 touchstart / mousedown 事件来实现：

¥When you want to inhibit TouchHold, you can do so by stopping propagation of the touchstart / mousedown events from the inner content:

<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 仍会触发。

¥However, if you are using capture or mouseCapture modifiers then events will first reach the TouchHold directive then the inner content, so TouchHold will still trigger.

关于 HMR 的说明(Note on HMR)

¥Note on HMR

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

¥Due to performance reasons, not all of the modifiers are reactive. Some require a window/page/component refresh to get updated. Please check the API card for the modifiers which are not marked as reactive.