Quasar 提供全功能 Vue 指令，可以完全取代像 Hammerjs 這樣的函式庫：v-touch-pan、v-touch-swipe、v-touch-hold 甚至是 v-touch-repeat。

這些指令也適用於滑鼠事件，而不僅僅是觸控事件，因此您也可以在桌面上為您的 App 建立很棒的功能。

我們將在下面幾行描述 v-touch-pan。

用法

在下方區域用滑鼠點擊並朝某個方向平移，即可查看實際效果。頁面滾動已停用，但如果您願意，可以選擇退出。

平移適用於滑鼠或原生觸控操作。您也可以僅捕獲特定方向（任何方向）的平移，如下所示。

僅捕獲水平平移的範例。請注意，在支援觸控的裝置上，滾動不會自動被封鎖，因為我們僅捕獲水平方向。

僅捕獲垂直平移的範例。頁面滾動已停用，但如果您願意，可以選擇退出。

捕獲自訂方向平移的範例。為此，請使用修飾符：up、down、left、right。頁面滾動已停用，但如果您願意，可以選擇退出。

處理滑鼠事件

當您也想處理滑鼠事件時，請使用 mouse 修飾符

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

阻止滾動（在支援觸控的裝置上）

預設情況下，指令不會阻止頁面滾動。如果您想阻止滾動，請使用 prevent 修飾符。

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

抑制 TouchPan

當您想抑制 TouchPan 時，可以透過停止從內部內容傳播 touchstart / mousedown 事件來實現

<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 仍會觸發。

FAB 範例

下面是一個在 QFab 上使用 TouchPan 的精美範例。您可以將其拖曳到螢幕上。

關於 HMR 的注意事項

由於效能原因，並非所有修飾符都是反應式的。有些需要視窗/頁面/元件重新整理才能更新。請查看 API 卡，了解未標記為反應式的修飾符。