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

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

我们将在下面几行中描述 v-touch-repeat。

用法

用鼠标点击并按住下面的区域以查看它在行动。请注意，在支持触摸的设备上，滚动不会被阻止。

默认重复模式为 0:600:300 (ms)。

以下是一个配置为也对 SPACE、 ENTER 和 h 键（请先将焦点放在它上面）做出反应的示例，重复模式为 0:300:200 (ms)。按住键，或点击/点击并按住。

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

处理鼠标事件

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

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

处理键盘事件

当您也想要处理键盘事件时，请使用 按键码 作为修饰符

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

有一些特殊的修饰符，您不需要编写等效的按键码： space、 tab、 enter。

抑制TouchRepeat

当您想要抑制TouchRepeat时，可以通过阻止 touchstart / mousedown / keydown 事件从内部内容传播来实现

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

关于HMR的说明

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