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

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

我們將在接下來的內容中描述 v-touch-repeat。

用法

在下方區域按住滑鼠以查看效果。請注意，在支援觸控的裝置上，捲動不會被封鎖。

預設的重複模式為 0:600:300 (毫秒)。

以下範例設定為也會對 SPACE、ENTER 和 h 鍵做出反應（請先 focus），重複模式為 0:300:200 (毫秒)。按下並按住按鍵，或點擊/輕觸並按住。

以下範例展示如何將 TouchRepeat 應用於 QBtn。請注意我們如何操作指令參數，以使藍色按鈕的遞增速度比紅色按鈕慢。

處理滑鼠事件

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

<div v-touch-repeat.mouse="myHandler">...</div>

處理鍵盤事件

當您也想處理鍵盤事件時，請使用 keycodes 作為修飾符。

<div v-touch-repeat.65.70="myHandler">...</div>

有些特殊的修飾符不需要您寫等效的 keycode：space、tab、enter。

抑制 TouchRepeat

當您想要抑制 TouchRepeat 時，您可以透過停止從內部內容傳播 touchstart / mousedown / keydown 事件來達成。

<div v-touch-repeat.mouse.enter="userHasHold">
  <!-- ...content -->
  <div @touchstart.stop @mousedown.stop @keydown.stop>
    <!--
      TouchRepeat will not apply here because
      we are calling stopPropagation() on touchstart,
      mousedown and keydown events
    -->
  </div>
  <!-- ...content -->
</div>

然而，如果您使用 capture、mouseCapture 或 keyCapture 修飾符，事件將首先到達 TouchRepeat 指令，然後到達內部內容，因此 TouchRepeat 仍然會觸發。

關於 HMR 的注意事項

由於效能考量，並非所有修飾符都是響應式的。有些需要刷新視窗/頁面/組件才能更新。請查看 API 卡，了解哪些修飾符未標記為響應式。