u

code/g3soft-libs/docs/examples/tree/context-menu.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+// contextMenu：右键节点或空白处弹出菜单；菜单点击通过 contextMenuClick 回传
+import { ref } from 'vue'
+import { G3Message, G3Tree, type TreeContextMenuItem, type TreeNodeData } from '@g3soft/ui'
+import { Copy, Pencil, Trash2 } from '@lucide/vue'
+
+const treeData: TreeNodeData[] = [
+  { key: 'a', title: '文档 A' },
+  { key: 'b', title: '文档 B' },
+]
+
+const lastAction = ref('暂无')
+
+// 用函数形式：可以按节点动态生成菜单（node 为 null 表示在空白处右键）
+function contextMenu(node: TreeNodeData | null): TreeContextMenuItem[] {
+  if (!node) {
+    return [{ key: 'create', label: '新建文档' }]
+  }
+  return [
+    { key: 'rename', label: '重命名', icon: Pencil },
+    { key: 'copy', label: '复制', icon: Copy },
+    { divider: true },
+    { key: 'delete', label: '删除', icon: Trash2, danger: true },
+  ]
+}
+
+function onMenuClick(info: { item: TreeContextMenuItem; node: TreeNodeData | null }) {
+  lastAction.value = `${info.node ? info.node.title : '空白处'} → ${info.item.label}`
+  G3Message.info(lastAction.value)
+}
+</script>
+
+<template>
+  <div style="max-width: 320px">
+    <G3Tree
+      :tree-data="treeData"
+      :context-menu="contextMenu"
+      default-expand-all
+      block-node
+      @context-menu-click="onMenuClick"
+    />
+    <p style="margin: 8px 0 0; font-size: 12px; color: #6b7280">{{ lastAction }}</p>
+  </div>
+</template>