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-pan。

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

用法(Usage)

¥Usage

点击下方区域，然后用鼠标向某个方向平移，即可查看其实际效果。页面滚动已被阻止，但你可以选择退出。

¥Click then pan in a direction with your mouse on the area below to see it in action. Page scrolling is prevented, but you can opt out if you wish.

平移操作可以通过鼠标或原生触摸操作进行。你还可以仅捕获向特定方向（任意方向）平移的图片，如下所示。

¥Panning works both with a mouse or a native touch action. You can also capture pan to certain directions (any) only as you’ll see below.

仅捕获水平平移的示例。请注意，在支持触摸的设备上，滚动不会被自动阻止，因为我们只进行水平捕获。

¥Example on capturing only horizontal panning. Notice that on touch capable devices the scrolling is automatically not blocked, since we are only capturing horizontally.

仅捕获垂直平移的示例。页面滚动已被阻止，但你可以选择退出。

¥Example on capturing only vertically panning. Page scrolling is prevented, but you can opt out if you wish.

捕获自定义方向平移的示例。为此，请使用修饰符：up, down, left, right.页面滚动已被阻止，但你可以选择退出。

¥Example on capturing panning on custom directions. For this, use modifiers: up, down, left, right. Page scrolling is prevented, but you can opt out if you wish.

处理鼠标事件(Handling Mouse Events)

¥Handling Mouse Events

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

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

<!--
  directive will also be triggered by mouse actions
-->
<div v-touch-pan.mouse="userHasPanned">...</div>

防止滚动（在支持触控的设备上）(Preventing Scroll (on touch capable devices))

¥Preventing Scroll (on touch capable devices)

默认情况下，该指令不会阻止页面滚动。如果你想阻止滚动，请使用 prevent 修饰符。

¥By default, the directive does not block page scrolling. If you want to prevent scrolling, then use the prevent modifier.

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

禁止 TouchPan(Inhibiting TouchPan)

¥Inhibiting TouchPan

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

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

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

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

FAB 示例(Example with FAB)

¥Example with FAB

下面是一个在 QFab 上使用 TouchPan 的优秀示例。你可以将其拖动到屏幕上。

¥Below is a nice example on using TouchPan on a QFab. You can drag it across the screen.

关于 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.