1

src/directives/longpress.js

@@ -1,84 +1,96 @@
+// src/directives/longPress.js
 export default {
   mounted(el, binding) {
+    // 默认长按时间为1000ms（1秒）
+    const duration = binding.arg || 1000;
     let pressTimer = null;
     let hasLongPressed = false;
-    const duration = binding.arg || 1000; // 默认1秒
 
-    // 开始按压
-    const start = (e) => {
+    // 开始按压处理
+    const startPress = (e) => {
       // 防止重复触发
       if (pressTimer !== null) return;
-
+      
       // 重置状态
       hasLongPressed = false;
-
-      // 设置定时器
+      
+      // 设置长按计时器
       pressTimer = setTimeout(() => {
         hasLongPressed = true;
         // 触发长按回调
-        if (typeof binding.value === "function") {
-          binding.value(e, "longpress");
-        } else if (binding.value?.longpress) {
-          binding.value.longpress(e);
-        }
+        triggerCallback('longpress', e);
       }, duration);
     };
 
-    // 结束按压
-    const end = (e) => {
-      // 清除定时器
+    // 结束按压处理
+    const endPress = (e) => {
+      // 清除计时器
       if (pressTimer) {
         clearTimeout(pressTimer);
         pressTimer = null;
       }
-
-      // 如果已经触发了长按，则执行release回调
+      
+      // 无论是否达到长按时间，都触发放开回调
+      triggerCallback('release', e);
+      
+      // 如果达到了长按时间，触发长按放开回调
       if (hasLongPressed) {
-        if (binding.value?.release) {
-          binding.value.release(e);
-        }
+        triggerCallback('longpressRelease', e);
       }
-      // 否则执行pressEnd回调（未达到长按时间就放开）
-      else {
-        if (binding.value?.pressEnd) {
-          binding.value.pressEnd(e);
-        }
-      }
-
+      
       hasLongPressed = false;
     };
 
     // 取消按压（鼠标移出元素）
-    const cancel = (e) => {
+    const cancelPress = (e) => {
       if (pressTimer) {
         clearTimeout(pressTimer);
         pressTimer = null;
+        // 取消时也触发release
+        triggerCallback('release', e);
         hasLongPressed = false;
       }
     };
 
-    // 添加事件监听
-    el.addEventListener("mousedown", start);
-    el.addEventListener("touchstart", start);
-    el.addEventListener("click", end);
-    el.addEventListener("mouseup", end);
-    el.addEventListener("mouseleave", cancel);
-    el.addEventListener("touchend", end);
-    el.addEventListener("touchcancel", cancel);
+    // 触发回调函数
+    const triggerCallback = (type, event) => {
+      if (typeof binding.value === 'function') {
+        // 函数形式：传入事件和类型
+        binding.value(event, type);
+      } else if (typeof binding.value === 'object') {
+        // 对象形式：调用对应方法
+        binding.value[type]?.(event);
+      }
+    };
 
-    // 保存以便卸载时移除
-    el._longPressHandlers = { start, end, cancel };
+    // 添加事件监听
+    el._longPressHandlers = { startPress, endPress, cancelPress };
+    
+    // 鼠标事件
+    el.addEventListener('mousedown', startPress);
+    el.addEventListener('mouseup', endPress);
+    el.addEventListener('mouseleave', cancelPress);
+    
+    // 触摸事件（移动端支持）
+    el.addEventListener('touchstart', startPress);
+    el.addEventListener('touchend', endPress);
+    el.addEventListener('touchcancel', cancelPress);
   },
 
   unmounted(el) {
     // 移除事件监听
-    const { start, end, cancel } = el._longPressHandlers || {};
-    if (start) el.removeEventListener("mousedown", start);
-    if (start) el.removeEventListener("touchstart", start);
-    if (end) el.removeEventListener("click", end);
-    if (end) el.removeEventListener("mouseup", end);
-    if (cancel) el.removeEventListener("mouseleave", cancel);
-    if (end) el.removeEventListener("touchend", end);
-    if (cancel) el.removeEventListener("touchcancel", cancel);
-  },
-};
+    const { startPress, endPress, cancelPress } = el._longPressHandlers || {};
+    if (startPress) {
+      el.removeEventListener('mousedown', startPress);
+      el.removeEventListener('touchstart', startPress);
+    }
+    if (endPress) {
+      el.removeEventListener('mouseup', endPress);
+      el.removeEventListener('touchend', endPress);
+    }
+    if (cancelPress) {
+      el.removeEventListener('mouseleave', cancelPress);
+      el.removeEventListener('touchcancel', cancelPress);
+    }
+  }
+};