Quasar 提供了一系列功能强大的 Vue 触摸指令，可以完全替代 Hammerjs 等第三方手势库。这些指令包括：v-touch-pan、v-touch-swipe、v-touch-hold 和 v-touch-repeat。

这些指令不仅支持触摸事件，还能处理鼠标事件，让您能够在应用中实现丰富的交互体验。

下面我们将详细介绍 v-touch-hold 指令的使用方法。

TouchHold API

用法

默认的长按触发时间为 600ms，您可以根据实际需求调整此值：

您也可以根据具体场景自定义灵敏度值。下面示例中的指令参数 600:12:15 表示：

• 等待时间：600ms
• 触摸事件灵敏度：12px
• 鼠标事件灵敏度：15px

处理鼠标事件

如果您需要同时支持鼠标操作，请添加 mouse 修饰符：

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

抑制 TouchHold

您可以通过阻止内部元素的事件冒泡来控制长按事件的触发范围：

<div v-touch-hold.mouse="userHasHold">
  <!-- ...content -->
  <div @touchstart.stop @mousedown.stop>
    <!--
      此处不会触发长按事件，因为我们
      阻止了 touchstart 和 mousedown 事件
      向上冒泡
    -->
  </div>
  <!-- ...content -->
</div>

需要注意的是，如果使用了 capture 或 mouseCapture 修饰符，事件会在捕获阶段就被 TouchHold 指令处理，因此内部元素的长按事件仍会被触发。

关于热更新

出于性能优化考虑，部分修饰符不支持热更新（热重载）。这意味着修改这些修饰符后，需要刷新页面才能看到效果。具体哪些修饰符不支持热更新，请参考 API 文档中的说明。