11

src/directives/longpress.js

@@ -0,0 +1,84 @@
+export default {
+  mounted(el, binding) {
+    let pressTimer = null;
+    let hasLongPressed = false;
+    const duration = binding.arg || 1000; // 默认1秒
+
+    // 开始按压
+    const start = (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);
+        }
+      }, duration);
+    };
+
+    // 结束按压
+    const end = (e) => {
+      // 清除定时器
+      if (pressTimer) {
+        clearTimeout(pressTimer);
+        pressTimer = null;
+      }
+
+      // 如果已经触发了长按，则执行release回调
+      if (hasLongPressed) {
+        if (binding.value?.release) {
+          binding.value.release(e);
+        }
+      }
+      // 否则执行pressEnd回调（未达到长按时间就放开）
+      else {
+        if (binding.value?.pressEnd) {
+          binding.value.pressEnd(e);
+        }
+      }
+
+      hasLongPressed = false;
+    };
+
+    // 取消按压（鼠标移出元素）
+    const cancel = (e) => {
+      if (pressTimer) {
+        clearTimeout(pressTimer);
+        pressTimer = null;
+        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);
+
+    // 保存以便卸载时移除
+    el._longPressHandlers = { start, end, cancel };
+  },
+
+  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);
+  },
+};

src/main.js

@@ -20,6 +20,7 @@ import SvgIcon from "@/components/Svg-icon/SvgIcon.vue";
 import { initCapacitor } from './plugins';
 import { setup  } from './plugins/storage'; 
 
+import longpress from '@/directives/longpress';
 
 import VConsole from 'vconsole';
 new VConsole(); 
@@ -33,7 +34,8 @@ async function appInit() {
   // UI
   app.use(Vant);
   app.use(Lazyload);
-  app.use(i18n);
+  app.use(i18n); 
+  app.directive('longpress', longpress);
   // windows 挂载
   setup()
 

src/views/im/chat/index.vue

@@ -36,7 +36,7 @@
     <!-- 输入框 -->
     <div class="page-foot">
       <div class="flex-box">
-        <svg-icon class="page-icon" name="voice" @mousedown="startAudio" @mouseup="sendAudioMessage" />
+        <svg-icon class="page-icon" name="voice" v-longpress="pressEvents" />
         <van-field
           rows="1"
           type="textarea"
@@ -167,7 +167,7 @@ const startAudio = async () => {
 }
 // 停止录音
 const stopRecording = async () => {
-  return new Promise<Uint8Array>(async (resolve) => {
+  return new Promise(async (resolve) => {
     if (!mediaRecorder.value) {
       resolve(new Uint8Array());
       return;
@@ -217,6 +217,14 @@ const sendAudioMessage = async () => {
     console.error('Error sending audio message:', error);
   }
 }
+
+const pressEvents = (event, type) => {
+  if (type === 'longpress') {
+    console.log('长按触发');
+  } else {
+    console.log('点击/放开触发');
+  }
+};
 // 发送消息
 const sendMessage = () => {
   if (!text.value.trim()) return;