类星体提供了功能齐全的 Vue 指令，可以完全取代像Hammerjs这样的库:v-touch-pan, v-touch-swipe, v-touch-hold，甚至v-touch-repeat。
这些指令不仅可以处理鼠标事件，还可以处理触摸事件，所以您可以用它们在您的 App 中完成一些很酷的事情。
下面我们将讲述v-touch-swipe指令
当用户用手指或鼠标在组件或元素上滑动时触发一个事件的 Vue 指令。
TouchSwipe API
用法
在下面的示例区域中，滑动鼠标/滑动手指以查看页面变化，如果使用鼠标，则需要快速操作。
如果滑动（swipe）起始于一个可拖拽的元素，该手势会被忽略，从而避免原生拖拽与手势相冲突。图片和链接默认都是可拖拽的：如果您的内容中包含 <img>、<router-link> 或 <a>，请为它们添加 draggable="false" 属性。
处理鼠标事件
当您想处理鼠标事件时，使用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 事件仍然会被触发。
TouchSwipe 触发后的事件
一旦识别到一次滑动，该指令就会消费掉紧随其后的事件，这样一次滑动就不会同时被当成一次轻触或一次点击——无论作用在元素本身还是它的任意父元素上。它会阻止后续的每一个 touchmove / mousemove，以及随后结束手势的那个事件：触摸事件是 touchend，鼠标事件是 mouseup。
这意味着在识别到滑动之后，元素上的 @touchmove、@touchend 和 @mouseup 监听器不会被调用。而当移动不足以构成一次滑动时，它们仍会被调用。如果你两种情况下都需要它们，请在捕获阶段监听：
<div v-touch-swipe="userHasSwiped" @touchend.capture="userHasLifted">
<!-- ...content -->
</div>