触摸滑动指令

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

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

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

TouchSwipe API

用法

用鼠标在下面的区域上滑动即可查看实际效果。 如果使用鼠标,则需要快速进行操作。

TIP

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










处理鼠标事件

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

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

禁止TouchSwipe

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

<div v-touch-swipe.mouse="userSwiped">
  <!-- ...内容 -->
  <div @touchstart.stop @mousedown.stop>
    <!--
      TouchSwipe不适用于此处,因为
       我们在touchstart和mousedown事件上
       调用stopPropagation() 
    -->
  </div>
  <!-- ...内容 -->
</div>

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

关于HMR的注意事项

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