触摸重复指令

Quasar提供全功能的可以完全替代Hammerjs这样的库的Vue指令:v-touch-panv-touch-swipev-touch-holdv-touch-repeat

这些指令也适用于鼠标事件,不仅是触摸事件,所以您也可以在桌面上为您的应用程序构建酷炫的功能。

我们将在下面的行中描述v-touch-repeat指令。

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

在下面的区域单击并按住鼠标,以查看其运行情况。 请注意,在具有触摸功能的设备上,滚动不会被阻止。

默认重复模式是0:600:300 (ms).

Basic

以下是配置为还对SPACEENTERh键(首先聚焦它)做出反应的示例,重复模式为0:300:200 (ms)。 击打并按住键,或单击/轻击并按住。

Custom keys

下面是将TouchRepeat应用于QBtn的示例。 请注意我们如何使用指令参数来使蓝色按钮的增量慢于红色按钮的增量。

Applied to QBtn

处理鼠标事件

如果您还想处理鼠标事件,请使用mouse修饰符:

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

处理按键事件

当您也想处理按键事件时,请使用keycodes作为修饰符:

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

您不需要编写一些特殊的修饰符即可编写等效的keycode:spacetabenter

禁止TouchRepeat

当您想禁止TouchRepeat时,可以通过停止内部内容中的touchstart/mousedown/keydown事件的传播来实现:

<div v-touch-repeat.mouse.enter="userHasHold">
  <!-- ...content -->
  <div @touchstart.stop @mousedown.stop @keydown.stop>
    <!--
      TouchRepeat不适用于此处,因为
       我们在touchstart、mousedown和keydown事件上
       调用stopPropagation() 
    -->
  </div>
  <!-- ...content -->
</div>

但是,如果使用capturemouseCapturekeyCapture修饰符,则事件将首先到达TouchRepeat指令,然后到达内部内容,因此TouchRepeat仍将触发。

关于HMR的注意事项

由于性能原因,在进行HMR更新时,参数和修饰符不会更新,因此您需要刷新窗口。

API

Loading API...
Please wait...