Quasar 提供了功能齐全的 Vue 指令，可以完全取代像 Hammerjs 这样的库：v-touch-pan、v-touch-swipe、v-touch-hold，甚至 v-touch-repeat。

这些指令不仅可以处理鼠标事件，还可以处理触摸事件，所以您可以用它们在您的应用中完成一些很酷的功能。

下面我们将讲述 v-touch-pan 指令。

TouchPan API

用法

在下面的示例区域中，点击后往任意方向平移，然后查看页面的变化。在触摸设备上，上下平移时，页面滚动会被禁用。

平移可以同时支持鼠标和触摸事件。您也可以指定平移的方向，例如只捕获水平方向的平移。

注意，在触摸设备上，滚动不会被自动阻止，因为我们只是水平平移。

下面的示例只捕获垂直方向的平移。默认会禁用页面滚动，但您也可以选择不禁用。

下面的示例演示如何使用 up、down、left、right 这四个修饰符来捕获自定义方向的平移。

页面滚动会被自动禁用，但您也可以选择不禁用。

处理鼠标事件

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

<!--
  指令也会被鼠标操作触发
-->
<div v-touch-pan.mouse="userHasPanned">...</div>

禁用页面滚动（在触摸设备上）

默认情况下，这个指令不会阻止页面滚动。如果您需要阻止页面滚动，请使用 prevent 修饰符：

<div v-touch-pan.prevent="userHasPanned">...</div>

抑制 TouchPan

您可以通过阻止内部元素的 touchstart/mousedown 事件冒泡来抑制 TouchPan 事件：

<div v-touch-pan.mouse="userHasPanned">
  <!-- ...content -->
  <div @touchstart.stop @mousedown.stop>
    <!--
      TouchPan 事件不会应用到这里，因为我们
      在 touchstart 和 mousedown 事件上
      调用了 stopPropagation()
    -->
  </div>
  <!-- ...content -->
</div>

然而，如果您使用 capture 或 mouseCapture 修饰符，事件会先到达 TouchPan 指令，然后才是内部元素，所以 TouchPan 事件仍然会被触发。

FAB 示例

下面是一个使用 QFab 的示例，您可以拖拽它移出屏幕。

注意热更新相关

由于性能原因，不是所有的修饰符都是响应式的，有些需要刷新页面才能更新。请在 API 卡片中查看哪些修饰符不具备响应式特性。