单击显示菜单

src/views/humanResources/organizationStructure/index.vue

@@ -106,7 +106,6 @@ export default {
     const graphData = await this.onInit()
     this.$nextTick(() => {
       this.initGraph(graphData)
-      document.addEventListener('click', this.onClick)
       this.$refs.boxRef.addEventListener('contextmenu', (e) => {
         e.preventDefault()
       })
@@ -116,15 +115,11 @@ export default {
     if (this.graph) {
       this.graph.off()
     }
-    document.removeEventListener('click', this.onClick)
     this.$refs.boxRef.removeEventListener('contextmenu', (e) => {
       e.preventDefault()
     })
   },
   methods: {
-    onClick () {
-      this.$refs.contextMenuRefs.style.display = 'none'
-    },
     async initData () {
       await this.$store.dispatch('system/getOrganizationTree')
       const data = await this.onInit()
@@ -253,21 +248,33 @@ export default {
         width,
         height
       }
-      graph.on(NodeEvent.CONTEXT_MENU, (e) => {
+
+      const contextMenuClick = (e) => {
         const { target } = e // 获取被点击节点的 ID
         this.nodes = graph.getNodeData(target.id)
-        e.preventDefault()
         const { x, y } = e.client
         content.x = x
         content.y = y
         contextMenu.style.left = x - left + 'px'
         contextMenu.style.top = y - top + 'px'
         contextMenu.style.display = 'block'
-      }).on(CommonEvent.WHEEL, () => {
-        contextMenu.style.display = 'none'
-      }).on(CanvasEvent.CONTEXT_MENU, (e) => {
+      }
+      const hideContextMenu = () => {
         contextMenu.style.display = 'none'
-      })
+      }
+      graph
+        .on(NodeEvent.CONTEXT_MENU, contextMenuClick)
+        .on(NodeEvent.CLICK, contextMenuClick)
+        .on(CommonEvent.WHEEL, hideContextMenu) // 鼠标滚动
+        .on(CanvasEvent.CONTEXT_MENU, hideContextMenu) // 画布空白右键
+        // .on(CanvasEvent.CONTEXT_MENU, e => {
+        //   e.preventDefault()
+        //   document.body.style.cursor = 'default'
+        //   hideContextMenu()
+        // }) // 画布空白右键
+        .on(CanvasEvent.CLICK, hideContextMenu) // 画布空白点击
+        .on(CanvasEvent.DRAG_START, hideContextMenu) // 画布拖拽
+        .on(NodeEvent.DRAG_START, hideContextMenu) // 节点拖拽
     },
     // 设置默认展示格式
     onSetClose (nodes) {