From bacbf2e3cb476ce74c23363425159ab59e930c68 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Thu, 16 Jun 2022 23:14:00 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E5=AE=A2=E6=88=B7=E7=AB=AF=E6=BB=9A=E5=8A=A8=E7=A9=BF=E9=80=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/functions/utils.js        | 35 ++++++++++++++++++-
 .../manage/components/ChatInput/index.vue     |  2 ++
 .../pages/manage/components/DialogWrapper.vue |  8 ++---
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/resources/assets/js/functions/utils.js b/resources/assets/js/functions/utils.js
index 79d42e3b4..3cfb6e818 100755
--- a/resources/assets/js/functions/utils.js
+++ b/resources/assets/js/functions/utils.js
@@ -74,5 +74,38 @@ module.exports = {
             })
         }
         return list;
-    }
+    },
+
+    /**
+     * 阻止滑动穿透
+     * @param el
+     */
+    scrollPreventThrough(el) {
+        if (!el) {
+            return;
+        }
+        if (el.getAttribute("data-prevent-through") === "yes") {
+            return;
+        }
+        el.setAttribute("data-prevent-through", "yes")
+        //
+        let targetY = null;
+        el.addEventListener('touchstart', function (e) {
+            targetY = Math.floor(e.targetTouches[0].clientY);
+        });
+        el.addEventListener('touchmove', function (e) {
+            // 检测可滚动区域的滚动事件，如果滑到了顶部或底部，阻止默认事件
+            let NewTargetY = Math.floor(e.targetTouches[0].clientY),    //本次移动时鼠标的位置，用于计算
+                sTop = el.scrollTop,        //当前滚动的距离
+                sH = el.scrollHeight,       //可滚动区域的高度
+                lyBoxH = el.clientHeight;   //可视区域的高度
+            if (sTop <= 0 && NewTargetY - targetY > 0) {
+                // 下拉页面到顶
+                e.preventDefault();
+            } else if (sTop >= sH - lyBoxH && NewTargetY - targetY < 0) {
+                // 上翻页面到底
+                e.preventDefault();
+            }
+        }, false);
+    },
 }
diff --git a/resources/assets/js/pages/manage/components/ChatInput/index.vue b/resources/assets/js/pages/manage/components/ChatInput/index.vue
index fd04e1311..7d22c66a6 100755
--- a/resources/assets/js/pages/manage/components/ChatInput/index.vue
+++ b/resources/assets/js/pages/manage/components/ChatInput/index.vue
@@ -125,6 +125,7 @@ import touchmouse from "../../../../directives/touchmouse";
 import TransferDom from "../../../../directives/transfer-dom";
 import clickoutside from "../../../../directives/clickoutside";
 import {Store} from "le5le-store";
+import {scrollPreventThrough} from "../../../../functions/utils";
 
 export default {
     name: 'ChatInput',
@@ -490,6 +491,7 @@ export default {
                                 containers[i].classList.remove("user-mention");
                                 containers[i].classList.remove("task-mention");
                                 containers[i].classList.add(mentionName);
+                                scrollPreventThrough(containers[i]);
                             }
                             this.getSource(mentionChar).then(array => {
                                 let values = [];
diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index ac189982c..f9e9381d7 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -6,8 +6,8 @@
         @drop.prevent="chatPasteDrag($event, 'drag')"
         @dragover.prevent="chatDragOver(true, $event)"
         @dragleave.prevent="chatDragOver(false, $event)"
-        @touchstart="onTouchstart"
-        @touchmove="onTouchmove">
+        @touchstart="onTouchStart"
+        @touchmove="onTouchMove">
         <!--顶部导航-->
         <div class="dialog-nav" :style="navStyle">
             <slot name="head">
@@ -649,14 +649,14 @@ export default {
             }
         },
 
-        onTouchstart(e) {
+        onTouchStart(e) {
             this.wrapperStart = Object.assign(this.scrollInfo(), {
                 clientY: e.touches[0].clientY,
                 exclud: !this.$refs.scroller.$el.contains(e.target),
             });
         },
 
-        onTouchmove(e) {
+        onTouchMove(e) {
             if (this.windowSmall && this.windowScrollY > 0) {
                 if (this.wrapperStart.exclud) {
                     e.preventDefault();