右键

src/views/workflow/chart/context-menu-tool.tsx

@@ -25,7 +25,10 @@ class ContextMenuTool extends ToolsView.ToolItem {
 
     if (visible && pos) {
       console.log(this.options)
-      app = createApp(contextMenuTool, {data: this.options.data})
+      app = createApp(contextMenuTool, {
+        data: this.options.data,
+        onClose: this.onMouseDown
+      })
       // 减去本身元素的宽高
       if (dom) {
         dom.style = `left: ${pos.x}px;top: ${pos.y}px;position: absolute;z-index: 100;`
@@ -36,10 +39,12 @@ class ContextMenuTool extends ToolsView.ToolItem {
   }
 
 
-  onMouseDown = () => {
-    timer = window.setTimeout(() => {
-      this.toggleContextMenu(false)
-    },200)
+  onMouseDown = (e, bool = false) => {
+    if (bool || !e.target.getAttribute('context-menu-tools')) {
+      timer = window.setTimeout(() => {
+        this.toggleContextMenu(false)
+      },200)
+    }
   }
 
   onContextMenu({ e }) {

src/views/workflow/chart/context-menu-tool.vue

@@ -1,28 +1,39 @@
 <template>
-  <div class="context-menu-tool">
-    右键菜单
-    <div>{{data}}</div>
+  <div class="context-menu-tool" :context-menu-tools="true">
+    <div class="del __hover" :context-menu-tools="true" @click="onDel">删除</div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {getCurrentInstance, reactive, ref} from "vue";
+import {getCurrentInstance, reactive} from "vue";
 
 const emits = defineEmits([])
 const props = defineProps({
-  data: {}
+  data: {},
+  graph: {},
+  onClose: <any>{},
 })
 const {proxy}: any = getCurrentInstance()
+
 const state: any = reactive({
 })
+const onDel = () => {
+  console.log(props.data)
+  console.log(props.graph)
+  props.onClose(null, true)
+}
 </script>
 
 <style lang="scss" scoped>
 .context-menu-tool {
+  min-width: 100px;
   padding: 10px;
   background-color: #ffffff;
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 10px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  .del {
+    color: red;
+  }
 }
 </style>