From a06c2cad58cb5fb9119eb051d662beb42e746c0a Mon Sep 17 00:00:00 2001
From: JYeontu <yongtaozheng0201@163.com>
Date: Sun, 23 Mar 2025 17:25:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B8=A6@=E5=8A=9F=E8=83=BD=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E6=A1=86=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/JMention/src/JMention.vue      | 66 ++++++++++++-------
 1 file changed, 44 insertions(+), 22 deletions(-)

diff --git a/JYeontuComponentWarehouse/packages/components/JMention/src/JMention.vue b/JYeontuComponentWarehouse/packages/components/JMention/src/JMention.vue
index db0e3ea..9f2506c 100644
--- a/JYeontuComponentWarehouse/packages/components/JMention/src/JMention.vue
+++ b/JYeontuComponentWarehouse/packages/components/JMention/src/JMention.vue
@@ -5,7 +5,7 @@
     >
         <ul
             contenteditable="false"
-            v-if="showDropdown"
+            v-show="showDropdown"
             class="dropdown-list"
             :style="positionStyle + menuStyle"
             ref="dropdownList"
@@ -69,10 +69,6 @@ export default {
             type: String,
             default: "",
         },
-        menuItemStyle: {
-            type: String,
-            default: "",
-        },
         menuItemActiveStyle: {
             type: String,
             default: "",
@@ -81,6 +77,10 @@ export default {
             type: String,
             default: "",
         },
+        isContain: {
+            type: Boolean,
+            default: true,
+        },
     },
     data() {
         return {
@@ -108,6 +108,19 @@ export default {
                 e.preventDefault();
             }
         });
+        document.addEventListener("click", (e) => {
+            const target = e.target.closest(".dropdown-list");
+            if (!target) {
+                this.showDropdown = false;
+            }
+        });
+        document.addEventListener("scroll", (e) => {
+            this.showDropdown = false;
+        });
+    },
+    destroyed() {
+        document.removeEventListener("dragstart", () => {});
+        document.removeEventListener("click", () => {});
     },
     methods: {
         initShowUserList() {
@@ -137,7 +150,6 @@ export default {
             }
             if (itemTop + itemHeight > scrollTop + containerHeight) {
                 dropdownList.scrollTop = itemTop - containerHeight + itemHeight;
-                return;
             }
         },
         dropDownKeydown(event) {
@@ -225,7 +237,7 @@ export default {
             if (lastAtIndex === -1) return "";
             return textBeforeCursor.slice(lastAtIndex + 1);
         },
-        getCaretPosition() {
+        async getCaretPosition() {
             const JMention = this.$refs.JMention;
             const JMentionContainer = this.$refs.JMentionContainer;
             const offsetLeft =
@@ -249,22 +261,34 @@ export default {
             let right = null;
             let bottom = null;
 
-            if (width / 2 < left) {
-                right = width - left;
-                left = null;
-            }
+            let x = rect.x,
+                y = rect.y;
+            const dropdownListRect = await this.getDropdownListSize();
+            const maxX = offsetLeft + width - dropdownListRect.width;
+            const maxY = offsetTop + height - dropdownListRect.height;
 
-            if (height / 2 < top) {
-                bottom = height - top;
-                top = null;
+            if (this.isContain) {
+                x = Math.min(x, maxX);
+                y = Math.min(y, maxY);
             }
+
             return {
                 top,
                 left,
                 right,
                 bottom,
+                x,
+                y,
             };
         },
+        async getDropdownListSize() {
+            this.showDropdown = true; // 临时显示元素
+            await this.$nextTick(); // 等待 DOM 更新
+            const width = this.$refs.dropdownList.offsetWidth;
+            const height = this.$refs.dropdownList.offsetHeight;
+            this.showDropdown = false; // 恢复隐藏
+            return { width, height };
+        },
         updateSelectedList() {
             const JMention = this.$refs.JMention;
             const nodeList = JMention.querySelectorAll(".j-mention-at");
@@ -299,7 +323,7 @@ export default {
         clickJMention() {
             this.showDropdown = false;
         },
-        divInput(e) {
+        async divInput(e) {
             this.updateValue();
             const lastChar = this.getLastChar();
             if (e.inputType === "deleteContentBackward" && !this.atText) {
@@ -320,12 +344,11 @@ export default {
             if (!this.showDropdown) {
                 return;
             }
-            const { top, left, right, bottom } = this.getCaretPosition();
+            const { x, y } = await this.getCaretPosition();
+            this.showDropdown = true;
             this.positionStyle = "";
-            if (top) this.positionStyle += `top:${top}px;`;
-            if (left) this.positionStyle += `left:${left}px;`;
-            if (right) this.positionStyle += `right:${right}px;`;
-            if (bottom) this.positionStyle += `bottom:${bottom}px;`;
+            this.positionStyle += `left:${x}px;`;
+            this.positionStyle += `top:${y}px;`;
             this.chooseIndex = 0;
         },
         insertAtCaret(text, dataSet) {
@@ -365,7 +388,6 @@ export default {
 
                 const tmp = document.createElement("span");
                 tmp.contentEditable = true;
-                // tmp.appendChild(span);
                 tmp.innerHTML += "&nbsp;";
 
                 for (const key in dataSet) {
@@ -449,7 +471,7 @@ export default {
 }
 
 .dropdown-list {
-    position: absolute;
+    position: fixed;
     list-style-type: none;
     padding: 0;
     margin: 0;
-- 
Gitee