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

¥Quasar offers full-featured Vue directives that can totally replace libraries like Hammerjs: v-touch-pan, v-touch-swipe, v-touch-hold and even v-touch-repeat.

这些指令不仅适用于触摸事件，也适用于鼠标事件，因此你也可以为桌面应用构建酷炫的功能。

¥These directives also work with mouse events, not only touch events, so you are able to build cool functionality for your App on desktops too.

我们将在下文中描述 v-touch-swipe。

¥We will be describing v-touch-swipe on the lines below.

用法(Usage)

¥Usage

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

¥Swipe with your mouse on the area below to see it in action. If using a mouse, you need to do it quick.

处理鼠标事件(Handling Mouse Events)

¥Handling Mouse Events

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

¥When you want to handle mouse events too, use the mouse modifier:

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

禁止 TouchSwipe(Inhibiting TouchSwipe)

¥Inhibiting TouchSwipe

当你想要禁用 TouchSwipe 时，可以通过停止从内部内容传播 touchstart / mousedown 事件来实现：

¥When you want to inhibit TouchSwipe, you can do so by stopping propagation of the touchstart / mousedown events from the inner content:

<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 仍会触发。

¥However, if you are using capture or mouseCapture modifiers then events will first reach the TouchHold directive then the inner content, so TouchSwipe will still trigger.

关于 HMR 的说明(Note on HMR)

¥Note on HMR

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

¥Due to performance reasons, not all of the modifiers are reactive. Some require a window/page/component refresh to get updated. Please check the API card for the modifiers which are not marked as reactive.