轻扫触摸/鼠标动作(Swipe Touch/Mouse Action)

Quasar提供全功能的可以完全替代Hammerjs这样的库的Vue指令：v-touch-pan，v-touch-swipe和v-touch-hold。

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

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

安装

编辑 /quasar.conf.js:

framework: {
  directives: ['TouchSwipe']
}

基本用法

<div v-touch-swipe="handler">...</div>
//"handler"是一个接收对象作为参数的函数

Handler参数

当DOM元素上发生轻扫触摸（或鼠标）动作时该handler函数/方法将被指令调用, 并且它接收到以下参数：

{
  evt, // JS原生事件
  direction, // "left", "right", "up" 或者 "down"
  duration, // 以毫秒为单位的数字
  distance // {x, y} 在水平和垂直方向上通过轻扫覆盖的像素距离
}

// example:
handler (obj) {
  console.log(obj.direction) // "right"
  console.log(obj.duration) // 78
  console.log(obj.distance.x) // 273
}

修饰符

属性 说明
horizontal 只捕获水平滑动。
vertical 只捕获垂直滑动。
up, right, down, left 捕获相应方向的滑动。
noMouse 避免捕获鼠标事件。

当你只想捕捉水平或垂直滑动，使用horizontal或vertical, 或者指定感兴趣的方向:

<div v-touch-swipe.horizontal="userHasSwiped">
  Capturing only horizontal swipes.
</div>

<div v-touch-swipe.up.right="userHasSwiped">
  Capturing only swipes to "up" or "right".
</div>

避免捕捉鼠标事件

如果您不想捕获鼠标动作，请使用“noMouse”修饰符：

<!--
  指令不会被鼠标动作触发;
  它现在只能通过触摸操作触发：
-->
<div v-touch-swipe.noMouse="userHasSwiped">...</div>

平移触摸 保持触摸