vue3+antd 实现文件夹目录右键菜单功能

原本的目录结构：
在这里插入图片描述

右键菜单：
在这里插入图片描述

点击菜单以后会触发回调：
在这里插入图片描述

完整的前端代码：

<template><a-directory-treev-model:expandedKeys="expandedKeys"v-model:selectedKeys="selectedKeys"multipleshow-line:tree-data="treeData"><template #title="{ key: treeKey, title }"><a-dropdown :trigger="['contextmenu']"><span>{{ title }}</span><template #overlay><a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)"><a-menu-item key="1">1st menu item</a-menu-item><a-menu-item key="2">2nd menu item</a-menu-item><a-menu-item key="3">3rd menu item</a-menu-item></a-menu></template></a-dropdown></template></a-directory-tree>
</template>
<script setup>
import {ref} from 'vue';const expandedKeys = ref(['0-0', '0-1']);
const selectedKeys = ref([]);
const treeData = [{title: 'parent 0',key: '0-0',children: [{title: 'leaf 0-0',key: '0-0-0',isLeaf: true,},{title: 'leaf 0-1',key: '0-0-1',isLeaf: true,},],},{title: 'parent 1',key: '0-1',children: [{title: 'leaf 1-0',key: '0-1-0',isLeaf: true,},{title: 'leaf 1-1',key: '0-1-1',isLeaf: true,},],},
];const onContextMenuClick = (treeKey, menuKey) => {console.log(treeKey, menuKey)
}
</script>