Browse Source

fix: 长按事件处理

chenzhen2 2 years ago
parent
commit
93fb4408b4
1 changed files with 24 additions and 7 deletions
  1. 24 7
      src/views/envmonitor/index.vue

+ 24 - 7
src/views/envmonitor/index.vue

@@ -13,7 +13,7 @@
       <div class="left-top">
         <div
           class="logo-box"
-          @touchstart="gtouchstart"
+          @touchstart="gtouchstart($event)"
           @touchmove="gtouchmove()"
           @touchend="showDeleteButton"
         >
@@ -362,6 +362,7 @@ export default defineComponent({
     const projectId: string = store.state.user.projectId;
     const sceneDetail: any = {};
     const timeOutEvent: any = {};
+    const touchInterval: any = {};
     const headerInfo: {
       headImg: any;
       headScene: string;
@@ -1773,14 +1774,20 @@ export default defineComponent({
         item.active = true;
       },
       timeOutEvent: timeOutEvent,
-      gtouchstart() {
+      touchNumber: 0,
+      gtouchstart(e: any) {
+        proxyData.touchNumber = 0;
         proxyData.timeOutEvent = setTimeout(function () {
+          proxyData.touchNumber = 1;
           proxyData.longPress();
-        }, 5000); //这里设置定时器,定义长按500毫秒触发长按事件
+        }, 500); //这里设置定时器,定义长按500毫秒触发长按事件
         return false;
       },
       //手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件
       showDeleteButton() {
+        console.log("dddd-");
+        clearInterval(proxyData.touchInterval);
+        proxyData.touchInterval = null;
         clearTimeout(proxyData.timeOutEvent); //清除定时器
         if (proxyData.timeOutEvent != 0) {
         }
@@ -1791,15 +1798,23 @@ export default defineComponent({
         clearTimeout(this.timeOutEvent); //清除定时器
         proxyData.timeOutEvent = 0;
       },
+      touchInterval: touchInterval,
       //真正长按后应该执行的内容
       longPress() {
         proxyData.timeOutEvent = 0;
+        proxyData.touchInterval = setInterval(() => {
+          proxyData.touchNumber++;
+          if (proxyData.touchNumber === 5) {
+            clearInterval(proxyData.touchInterval);
+            proxyData.touchInterval = null;
+            router.push({
+              name: "home",
+              query: { mac: proxyData.userInfo.mac },
+            });
+          }
+        }, 1000);
         //执行长按要执行的内容,如弹出菜单
         // console.log("长按");
-        router.push({
-          name: "home",
-          query: { mac: proxyData.userInfo.mac },
-        });
       },
     });
     nextTick(() => {
@@ -1864,6 +1879,8 @@ export default defineComponent({
       .logo-box {
         display: inline-block;
         vertical-align: middle;
+        width: 60px;
+        height: 20px;
       }
       .left-time {
         span {