平移触摸/鼠标操作(Panning Touch/Mouse Action)

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

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

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

安装

编辑 /quasar.conf.js:

framework: {
  directives: ['TouchPan']
}

基本用法

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

Handler参数

当DOM元素上发生平移触摸（或鼠标）动作时该handler函数/方法将被指令调用（触摸位置的任何变化触发一个调用）, 并且它接收到以下参数：

{
  evt,       // JS原生事件
  position,  // {top, left} 以像素为单位的
               // 用户手指当前所在的位置
  direction, // "left", "right", "up" 或者 "down"
  duration,  // 自“平移”开始以来，以毫秒为单位的数字
  distance,  // {x, y} 在水平和垂直方向上
               // 通过平移覆盖的像素距离
  delta,     // {x, y} 距上次调用handler后的像素距离
  isFirst,   // 布尔值; 平移刚刚开始了吗？
  isFinal    // 布尔值; 平移结束了吗?
}

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

修饰符

属性 说明
horizontal 只捕获水平平移。
vertical 只捕获垂直平移。
noMouse 避免捕获鼠标事件。
stop 一旦检测到平移，停止事件传播。
prevent 一旦检测到平移，阻止事件的默认浏览器行为。
mightPrevent 如果不使用prevent属性，但可能调用event.preventDefault()，则指定此修饰符，否则您将收到控制台警告。

您只想捕捉水平或垂直滑动时，请使用horizontal或vertical 。

<div v-touch-pan.horizontal="userHasPanned">...</div>

避免捕捉鼠标事件

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

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

防止滚动（在支持触摸的设备上）

默认情况下，该指令不会阻止页面滚动。 如果你想防止滚动，那么使用prevent修饰符。

<div v-touch-pan.prevent="userHasPanned">...</div>

时间轴 轻扫触摸