Vue 3 实现右键自定义菜单需拦截原生行为并精准定位：用 @contextmenu.prevent 获取坐标，结合防越界计算与 fixed 定位；通过全局 click/ESC 监听和 @click.stop 控制关闭；推荐封装为组合式函数并优化样式交互。
在 Vue 3 中实现右键自定义上下文菜单，核心是两件事：拦截原生右键行为、精准定位菜单到鼠标点击位置。不依赖第三方库也能快速完成，但要注意边界适配和事件冒泡控制。
阻止默认右键并捕获坐标
使用 @contextmenu.prevent 修饰符是最简洁的方式，它自动调用 event.preventDefault() 并阻止浏览器默认菜单弹出：
- 在目标元素上绑定：
<div @contextmenu.prevent="onRightClick">右键我</div> - 在事件处理器中获取鼠标位置：
e.clientX和e.clientY是视口坐标，适合配合position: fixed - 若需相对容器定位（如表格某行），可用
e.offsetX / e.offsetY或getBoundingClientRect()计算偏移
动态设置菜单位置并防越界
菜单显示时不能超出屏幕，尤其在右下角触发时容易被截断：
- 基础定位写法：
:style="{ top: `${y}px`, left: `${x}px` }"，其中y和x来自右键事件 - 防越界逻辑建议：菜单宽度/高度提前估算（如固定宽 200px、高 auto），再做判断：
const left = Math.min(e.clientX, window.innerWidth - menuWidth)const top = Math.min(e.clientY, window.innerHeight - menuHeight) - 更稳妥的做法是用
getBoundingClientRect()获取菜单渲染后尺寸，再动态调整——需在nextTick中执行
关闭菜单的可靠方式
仅靠点击菜单项关闭不够，用户还可能点空白处或按 ESC 键：
立即学习“前端免费学习笔记（深入）”；
- 监听全局
click：在onMounted中添加document.addEventListener('click', hideMenu)，并在onUnmounted移除 - 菜单内部需加
@click.stop，防止点击菜单项时冒泡触发关闭 - ESC 键支持：
document.addEventListener('keydown', e => e.key === 'Escape' && hideMenu()) - 推荐封装为组合式函数（如
useContextMenu），复用关闭逻辑
样式与交互细节建议
视觉和体验上容易忽略但影响很大：
- 菜单容器用
position: fixed（非 absolute），避免滚动时错位 - 加
z-index确保层级最高，建议 ≥ 1000 - 用
<transition>包裹菜单，启用淡入动画提升质感 - 禁用菜单项时，除了灰显，还要加
pointer-events: none或@click.prevent阻止响应
