Quasar 提供了功能齐全的 Vue 指令，可以完全取代 Hammerjs 之类的库：v-touch-pan、v-touch-swipe、v-touch-hold 甚至 v-touch-repeat。
这些指令也适用于鼠标事件，而不仅仅是触摸事件，因此您也可以为台式机应用程序构建酷炫的功能。
我们将在下面的几行中描述 v-touch-pan。
使用
单击然后在以下区域用鼠标沿某个方向平移，以查看它的实际效果。页面滚动被阻止，但您可以选择退出，如果您愿意。
提示
如果您的内容中也包含图像，您可能需要为它们添加 draggable="false"，否则本机浏览器行为可能会以负面方式干扰。
平移适用于鼠标或本机触摸操作。您还可以像下面将看到的那样，仅捕获特定方向（任何方向）的平移。
仅捕获水平平移的示例。请注意，在支持触摸的设备上，滚动会自动不被阻止，因为我们只捕获了水平方向。
仅捕获垂直平移的示例。页面滚动被阻止，但您可以选择退出，如果您愿意。
捕获自定义方向平移的示例。为此，请使用修饰符：up、down、left、right。页面滚动被阻止，但您可以选择退出，如果您愿意。
处理鼠标事件
当您也想处理鼠标事件时，请使用 mouse 修饰符
<!--
directive will also be triggered by mouse actions
-->
<div v-touch-pan.mouse="userHasPanned">...</div>阻止滚动（在支持触摸的设备上）
默认情况下，指令不会阻止页面滚动。如果要阻止滚动，请使用 prevent 修饰符。
<div v-touch-pan.prevent="userHasPanned">...</div>抑制 TouchPan
当您想要抑制 TouchPan 时，您可以通过阻止内部内容的 touchstart / mousedown 事件传播来实现。
<div v-touch-pan.mouse="userHasHold">
<!-- ...content -->
<div @touchstart.stop @mousedown.stop>
<!--
TouchPan will not apply here because
we are calling stopPropagation() on touchstart
and mousedown events
-->
</div>
<!-- ...content -->
</div>但是，如果您使用的是 capture 或 mouseCapture 修饰符，则事件将首先到达 TouchPan 指令，然后到达内部内容，因此 TouchPan 仍然会触发。
FAB 示例
以下是使用 TouchPan 在 QFab 上的一个很好的示例。您可以将其拖放到屏幕上。
关于 HMR 的说明
由于性能原因，并非所有修饰符都是反应式的。有些需要窗口/页面/组件刷新才能更新。请查看 API 卡，查看哪些修饰符没有标记为反应式。