Demo：优化鼠标在窗口边缘点击右键时菜单显示不全的问题

ZMonet · Apr 17, 2024 · 20fae62 · 20fae62
1 parent 6b40358
commit 20fae62
Showing 1 changed file with 31 additions and 36 deletions.
diff --git a/web/src/pages/Edit/components/Contextmenu.vue b/web/src/pages/Edit/components/Contextmenu.vue
@@ -2,6 +2,7 @@
   <div
     class="contextmenuContainer listBox"
     v-if="isShow"
+    ref="contextmenuRef"
     :style="{ left: left + 'px', top: top + 'px' }"
     :class="{ isDark: isDark }"
   >
@@ -239,24 +240,31 @@ export default {
   methods: {
     ...mapMutations(['setLocalConfig']),
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-07-14 21:38:50
-     * @Desc: 节点右键显示
-     */
+    // 计算右键菜单元素的显示位置
+    getShowPosition(x, y) {
+      const rect = this.$refs.contextmenuRef.getBoundingClientRect()
+      if (x + rect.width > window.innerWidth) {
+        x = x - rect.width - 20
+      }
+      if (y + rect.height > window.innerHeight) {
+        y = window.innerHeight - rect.height - 10
+      }
+      return { x, y }
+    },
+
+    // 节点右键显示
     show(e, node) {
       this.type = 'node'
-      this.left = e.clientX + 10
-      this.top = e.clientY + 10
       this.isShow = true
       this.node = node
+      this.$nextTick(() => {
+        const { x, y } = this.getShowPosition(e.clientX + 10, e.clientY + 10)
+        this.left = x
+        this.top = y
+      })
     },
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-07-16 13:27:48
-     * @Desc: 鼠标按下事件
-     */
+    // 鼠标按下事件
     onMousedown(e) {
       if (e.which !== 3) {
         return
@@ -266,11 +274,7 @@ export default {
       this.isMousedown = true
     },
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-07-16 13:27:53
-     * @Desc: 鼠标松开事件
-     */
+    // 鼠标松开事件
     onMouseup(e) {
       if (!this.isMousedown) {
         return
@@ -286,35 +290,26 @@ export default {
       this.show2(e)
     },
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-07-15 22:54:08
-     * @Desc: 画布右键显示
-     */
+    // 画布右键显示
     show2(e) {
       this.type = 'svg'
-      this.left = e.clientX + 10
-      this.top = e.clientY + 10
       this.isShow = true
+      this.$nextTick(() => {
+        const { x, y } = this.getShowPosition(e.clientX + 10, e.clientY + 10)
+        this.left = x
+        this.top = y
+      })
     },
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-07-14 21:37:55
-     * @Desc: 隐藏
-     */
+    // 隐藏
     hide() {
       this.isShow = false
-      this.left = 0
-      this.top = 0
+      this.left = -9999
+      this.top = -9999
       this.type = ''
     },
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-07-14 23:27:54
-     * @Desc: 执行命令
-     */
+    // 执行命令
     exec(key, disabled, ...args) {
       if (disabled) {
         return