触摸平移指令

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

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

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

TouchPan API

用法

单击然后用鼠标在下面的区域向一个方向平移,以查看实际效果。 页面滚动被阻止,但是您可以选择退出。

TIP

如果您的内容也有图像,您可能需要将draggable="false"添加到图像中,否则本地浏览器行为可能会以负面方式干扰。




平移既可以使用鼠标也可以使用原生触摸动作。 您也能只在特定方向(任何方向)捕获平移,如下面看到的那样。

仅捕获水平平移的示例。 请注意,在具有触摸功能的设备上,滚动不会自动被阻止,因为我们只是水平捕获。




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




捕获自定义方向平移的示例。 为此,使用修饰符:updownleftright。 页面滚动被阻止,但是您可以选择退出。




处理鼠标事件

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

<!--
  指令也将由鼠标操作触发
-->
<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">
  <!-- ...内容 -->
  <div @touchstart.stop @mousedown.stop>
    <!--
      TouchPan不适用于此处,因为
       我们在touchstart和mousedown事件上
       调用stopPropagation()
    -->
  </div>
  <!-- ...内容 -->
</div>

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

Example with FAB

下面是在QFab上使用TouchPan的一个很好的例子。你可以在屏幕上拖动它。




Note on HMR

由于性能原因,并不是所有的修饰符都是响应式的。有些需要刷新窗口/页面/组件才能更新。请检查API卡中未标记为响应式的修饰符。