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 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-repeat。

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

用法(Usage)

¥Usage

点击下方区域并按住即可查看实际效果。请注意，在支持触摸的设备上，滚动不会被阻止。

¥Click and hold with your mouse on the area below to see it in action. Notice that on touch capable devices the scrolling is not blocked.

默认重复模式为 0:600:300（毫秒）。

¥The default repeat pattern is 0:600:300 (ms).

下面是一个配置为同时响应 SPACE、ENTER 和 h 键的示例（首先关注它），重复模式为 0:300:200（毫秒）。按住键盘，或点击/轻触并按住。

¥Below is an example configured to also react to SPACE, ENTER and h keys (focus on it first), with 0:300:200 (ms) repeat pattern. Hit & hold keys, or click/tap and hold.

以下是将 TouchRepeat 应用于 QBtn 的示例。请注意，我们如何使用指令参数，以使蓝色按钮的递增速度比红色按钮慢。

¥Below is an example of applying TouchRepeat to QBtn. Notice how we play with the directive arguments in order to make the blue buttons increment slower than the red ones.

处理鼠标事件(Handling Mouse Events)

¥Handling Mouse Events

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

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

<div v-touch-repeat.mouse="myHandler">...</div>

处理按键事件(Handling Key Events)

¥Handling Key Events

当你还想处理按键事件时，请使用 keycodes 作为修饰符：

¥When you want to handle key events too, use keycodes as modifiers:

<div v-touch-repeat.65.70="myHandler">...</div>

有一些特殊的修饰符，你不需要编写等效的键码：space, tab, enter.

¥There are some special modifiers that you do not require to write the equivalent keycode: space, tab, enter.

禁止 TouchRepeat(Inhibiting TouchRepeat)

¥Inhibiting TouchRepeat

当你想要禁用 TouchRepeat 时，可以通过停止从内部内容传播 touchstart / mousedown / keydown 事件来实现：

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

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

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

¥However, if you are using capture, mouseCapture or keyCapture modifiers then events will first reach the TouchRepeat directive then the inner content, so TouchRepeat 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.