获取焦点时防止滑动返回抖动

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -168,6 +168,9 @@
             :size="380">
             <DialogGroupInfo v-if="groupInfoShow" :dialogId="dialogId"/>
         </DrawerOverlay>
+
+        <!--滑动拦截-->
+        <div ref="back" v-show="isFocus" class="dialog-wrapper-back"></div>
     </div>
 </template>
 
@@ -208,6 +211,7 @@ export default {
             msgText: '',
             msgNew: 0,
             topId: 0,
+            isFocus: false,
 
             allMsgs: [],
             tempMsgs: [],
@@ -228,11 +232,11 @@ export default {
     },
 
     mounted() {
-
+        this.$refs.back.addEventListener('touchmove', this.backListener)
     },
 
     beforeDestroy() {
-
+        this.$refs.back.removeEventListener('touchmove', this.backListener)
     },
 
     computed: {
@@ -584,10 +588,12 @@ export default {
         },
 
         onEventFocus() {
+            this.isFocus = true;
             this.$emit("on-focus")
         },
 
         onEventBlur() {
+            this.isFocus = false;
             this.$emit("on-blur")
         },
 
@@ -704,7 +710,11 @@ export default {
             } else {
                 this.goBack();
             }
-        }
+        },
+
+        backListener(e) {
+            e.preventDefault()
+        },
     }
 }
 </script>

resources/assets/sass/pages/components/dialog-wrapper.scss

@@ -934,7 +934,6 @@
     }
 }
 
-
 .dialog-wrapper-paste {
     display: flex;
     flex-direction: column;
@@ -966,6 +965,15 @@
     }
 }
 
+.dialog-wrapper-back {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 20px;
+    z-index: 9998;
+}
+
 @media (max-width: 768px) {
     .dialog-wrapper {
         .dialog-nav {