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

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

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

TouchSwipe API

用法

用鼠标在下面的区域上滑动即可查看实际效果。 如果使用鼠标，则需要快速进行操作。

处理鼠标事件

如果您还想处理鼠标事件，请使用mouse修饰符：

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

禁止TouchSwipe

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

<div v-touch-swipe.mouse="userSwiped">
  <!-- ...内容 -->
  <div @touchstart.stop @mousedown.stop>
    <!--
      TouchSwipe不适用于此处，因为
       我们在touchstart和mousedown事件上
       调用stopPropagation（） 
    -->
  </div>
  <!-- ...内容 -->
</div>

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

关于HMR的注意事项

由于性能原因，在进行HMR更新时，修饰符capture、mouse和mouseCapture不会更新，因此您需要刷新窗口。