50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
/**
|
||
* v-longpress
|
||
* 长按指令，长按时触发事件
|
||
*/
|
||
import type { Directive, DirectiveBinding } from "vue";
|
||
|
||
const directive: Directive = {
|
||
mounted(el: HTMLElement, binding: DirectiveBinding) {
|
||
if (typeof binding.value !== "function") {
|
||
throw "callback must be a function";
|
||
}
|
||
// 定义变量
|
||
let pressTimer: any = null;
|
||
// 创建计时器（ 2秒后执行函数 ）
|
||
const start = (e: any) => {
|
||
if (e.button) {
|
||
if (e.type === "click" && e.button !== 0) {
|
||
return;
|
||
}
|
||
}
|
||
if (pressTimer === null) {
|
||
pressTimer = setTimeout(() => {
|
||
handler(e);
|
||
}, 1000);
|
||
}
|
||
};
|
||
// 取消计时器
|
||
const cancel = () => {
|
||
if (pressTimer !== null) {
|
||
clearTimeout(pressTimer);
|
||
pressTimer = null;
|
||
}
|
||
};
|
||
// 运行函数
|
||
const handler = (e: MouseEvent | TouchEvent) => {
|
||
binding.value(e);
|
||
};
|
||
// 添加事件监听器
|
||
el.addEventListener("mousedown", start);
|
||
el.addEventListener("touchstart", start);
|
||
// 取消计时器
|
||
el.addEventListener("click", cancel);
|
||
el.addEventListener("mouseout", cancel);
|
||
el.addEventListener("touchend", cancel);
|
||
el.addEventListener("touchcancel", cancel);
|
||
}
|
||
};
|
||
|
||
export default directive;
|