Touch Swipe Directive
类星体提供了功能齐全的 Vue 指令，可以完全取代像Hammerjs这样的库:v-touch-pan, v-touch-swipe, v-touch-hold，甚至v-touch-repeat。
这些指令不仅可以处理鼠标事件，还可以处理触摸事件，所以您可以用它们在您的 App 中完成一些很酷的事情。
下面我们将讲述v-touch-swipe指令
当用户用手指或鼠标在组件或元素上滑动时触发一个事件的 Vue 指令。
TouchSwipe API
类型
Function | undefined
说明
滑动操作的处理函数（使用 undefined 来禁用）
用法
在下面的示例区域中，滑动鼠标/滑动手指以查看页面变化，如果使用鼠标，则需要快速操作。
TIP
如果您的内容带有图片，您可能需要给它们添加draggable="false"属性，否则浏览器的原生事件可能会起副作用。
arrow_upward
arrow_back
arrow_downwardSwipe in any direction
arrow_forward Swipe to right only arrow_forward
arrow_upward
arrow_back
Swipe up or left
处理鼠标事件
当您想处理鼠标事件时，使用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;
};
}