Touch Swipe Directive

类星体提供了功能齐全的 Vue 指令，可以完全取代像Hammerjs这样的库:v-touch-pan, v-touch-swipe, v-touch-hold，甚至v-touch-repeat。

这些指令不仅可以处理鼠标事件，还可以处理触摸事件，所以您可以用它们在您的 App 中完成一些很酷的事情。

下面我们将讲述v-touch-swipe指令

当用户用手指或鼠标在组件或元素上滑动时触发一个事件的 Vue 指令。

TouchSwipe API

用法

在下面的示例区域中，滑动鼠标/滑动手指以查看页面变化，如果使用鼠标，则需要快速操作。

处理鼠标事件

当您想处理鼠标事件时，使用mouse修饰符：

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

Inhibiting TouchSwipe

您可以通过阻止内部元素touchstart/mousedown事件的冒泡行为来抑制 TouchSwipe 事件：

<div v-touch-swipe.mouse="userSwiped">
  <!-- ...content -->
  <div @touchstart.stop @mousedown.stop>
    <!--
      TouchSwipe 事件不会应用到这里， 因为我们
      在 touchstart 和 mousedown 事件上
      调用了 stopPropagation()
    -->
  </div>
  <!-- ...content -->
</div>

然而，若您使用capture 或者 mouseCapture修饰符，则事件会先到达 TouchPan 指令，然后才是内部元素，所以 TouchPan 事件仍然会被触发。

注意热更新相关

由于性能的原因，不是所有的修饰符都是 reactive 的，有一些需要刷新页面才能更新，请在 API 卡片中检查的哪些修饰符不具备 reactive

类型定义

export interface TouchSwipeParams {
  evt: TouchEvent | MouseEvent;
  touch: boolean;
  mouse: boolean;
  direction: "up" | "down" | "left" | "right";
  duration: number;
  distance: {
    x: number;
    y: number;
  };
}