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

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

我们将在下面的行中描述 v-touch-swipe。

用法

在下面的区域用鼠标滑动以查看其运行效果。如果使用鼠标，则需要快速滑动。

处理鼠标事件

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

<div v-touch-swipe.mouse="userHasSwiped">...</div>

禁止 TouchSwipe

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

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

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

关于 HMR 的说明

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