45 lines
1.4 KiB
Vue
45 lines
1.4 KiB
Vue
<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>
|