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

這些指令也適用於滑鼠事件，而不僅僅是觸控事件，因此您也能為桌面上的應用程式建構很酷的功能。

我們將在以下幾行描述 v-touch-swipe。

用法

在下方區域用滑鼠滑動以查看實際效果。如果使用滑鼠，您需要快速操作。

處理滑鼠事件

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

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

抑制 TouchSwipe

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

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

關於 HMR 的注意事項

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