usecontextmenu 封装右键菜单逻辑,提供 showmenu/hidemenu/selectitem 等 api,支持动态菜单、上下文透传、边界检测与定位优化,解耦 ui 与行为。

用组合式函数封装右键菜单交互逻辑,核心是把「事件监听、位置计算、菜单显隐、点击收起」这些共性能力抽离成可复用的 useContextMenu 函数。它不耦合 UI,只管状态和行为,配合模板灵活渲染。
定义基础响应式状态与事件绑定
在组合函数内声明菜单是否显示、坐标位置、当前菜单数据等响应式变量,并绑定全局右键拦截和点击收起逻辑:
- 用
ref管理show(布尔值)、x和y(像素坐标)、menuItems(菜单项数组) - 在
onMounted中监听contextmenu事件,用$event.clientX / clientY计算位置并阻止默认行为 - 同时监听
document:click或mousedown,点击非菜单区域时设show = false - 调用
onUnmounted清理事件监听器,避免内存泄漏
支持动态菜单与上下文透传
右键菜单往往需要根据点击目标不同展示不同选项,所以组合函数要能接收“触发源”信息:

