From 2aff11bb19d658c08844fe251f5af04046a1e1ce Mon Sep 17 00:00:00 2001
From: bob <312777916@qq.com>
Date: Thu, 17 Oct 2024 21:23:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=A8=E4=BC=9A=E8=AF=9D=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=9D=A0=E8=BF=91=E5=BA=95=E9=83=A8=E7=9A=84=E4=BD=8D=E7=BD=AE?=
 =?UTF-8?q?=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95=EF=BC=8C=E5=BA=94=E8=AF=A5?=
 =?UTF-8?q?=E5=BE=80=E4=B8=8A=E6=96=B9=E5=BC=B9=E5=87=BA=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/ContextMenu.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/common/ContextMenu.vue b/src/components/common/ContextMenu.vue
index e1eeff4..d5e4baf 100644
--- a/src/components/common/ContextMenu.vue
+++ b/src/components/common/ContextMenu.vue
@@ -1,10 +1,11 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
 
 const props = defineProps(['menu'])
 const emit = defineEmits(['selectMenu'])
 
 const containerRef = ref()
+const menuRef = ref()
 const isShowMenu = ref(false)
 const x = ref(0)
 const y = ref(0)
@@ -29,6 +30,15 @@ const handleContextMenu = (e) => {
   isShowMenu.value = true
   x.value = e.clientX
   y.value = e.clientY
+
+  // 如果发现菜单超出containerRef的底部了，y要修正一下，往上面弹出菜单
+  nextTick(() => {
+    if (e.clientY + menuRef.value.clientHeight > containerRef.value.clientHeight) {
+      y.value = e.clientY - menuRef.value.clientHeight
+    } else {
+      y.value = e.clientY
+    }
+  })
 }
 
 const handleEscEvent = (event) => {
@@ -54,6 +64,7 @@ const handleClick = (item) => {
         class="context-menu"
         :style="{ left: x + 'px', top: y + 'px' }"
         @contextmenu.prevent
+        ref="menuRef"
       >
         <div class="menu-list">
           <div