触摸/鼠标保持操作(Touch/Mouse Hold Action)

Quasar提供全功能的可以完全替代Hammerjs这样的库的Vue指令:v-touch-panv-touch-swipev-touch-hold

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

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

安装

编辑 /quasar.conf.js:

framework: {
directives: ['TouchHold']
}

基本用法

<div v-touch-hold="handler">...</div>

“handler”是一个接收对象作为参数的函数
请注意,默认的“保持”持续时间是600ms。 这意味着你的handler函数将在600ms后运行。

Handler参数

handler函数/方法在用户轻击/轻按并保持在DOM元素上时由指令调用,并且它接收到以下参数:

{
evt, // JS原生事件
position: // {x, y}屏幕偏移量
duration // 以毫秒为单位的数字
}

// 例子:
handler (obj) {
console.log(obj.position) // {x: 22, y: 451}
console.log(obj.duration) // 78
}

修饰符

属性 说明
noMouse 避免捕获鼠标事件。
stop 一旦检测到保持操作,停止事件传播。
prevent 一旦检测到保持操作,请阻止事件的默认浏览器行为。

避免捕捉鼠标事件

当你不想捕捉鼠标动作时,使用noMouse修饰符:

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

防止滚动(在支持触摸的设备上)

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

<div v-touch-hold.prevent="userHasHold">...</div>

自定义持续时间

<div v-touch-hold:1000="userHasHold">...</div>