Quasar
触摸/鼠标保持操作(Touch/Mouse Hold Action)
Quasar提供全功能的可以完全替代Hammerjs这样的库的Vue指令：v-touch-pan，v-touch-swipe和v-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> |