Quasar 提供了功能齐全的 Vue 指令，可以完全取代像 Hammerjs 这样的库：v-touch-pan、v-touch-swipe、v-touch-hold，甚至 v-touch-repeat。
这些指令不仅可以处理鼠标事件，还可以处理触摸事件，所以您可以用它们在您的应用中完成一些很酷的功能。
下面我们将讲述 v-touch-pan 指令。
TouchPan API
用法
在下面的示例区域中，点击后往任意方向平移，然后查看页面的变化。在触摸设备上，上下平移时，页面滚动会被禁用。
如果拖动（pan）起始于一个可拖拽的元素，该手势会被忽略，从而避免原生拖拽与手势相冲突。图片和链接默认都是可拖拽的：如果您的内容中包含 <img>、<router-link> 或 <a>，请为它们添加 draggable="false" 属性。
平移可以同时支持鼠标和触摸事件。您也可以指定平移的方向，例如只捕获水平方向的平移。
注意，在触摸设备上，滚动不会被自动阻止，因为我们只是水平平移。
下面的示例只捕获垂直方向的平移。默认会禁用页面滚动，但您也可以选择不禁用。
下面的示例演示如何使用 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 的示例，您可以拖拽它移出屏幕。