Vue Teleport 如何在右键菜单组件中根据点击坐标精准传送

Vue Teleport 实现右键菜单需动态创建唯一容器并复用，结合事件坐标（pageX/Y）与内联样式定位，使用 position: fixed 避免父级影响，并通过全局 click 监听实现点击外部隐藏。

Vue 的 Teleport 本身不直接处理坐标定位，它只负责把内容“挪”到目标 DOM 节点里。要在右键菜单中实现根据点击坐标精准显示，关键在于：传送内容 + 动态定位样式，两者配合完成。

目标容器必须存在且可动态挂载

右键菜单不能依赖固定 ID（比如 #context-menu）在 HTML 中提前写死，否则多个菜单实例会冲突或覆盖。推荐做法是：

1. 在 mounted 或首次右键时，动态创建一个唯一容器（如 div[data-context="menu-uuid"]），并 append 到 document.body
2. 用 ref 或响应式变量保存该容器的 DOM 引用，作为 teleport :to 的目标
3. 确保每次右键都复用同一个容器（避免重复创建），但清空内容再重新渲染

菜单组件接收坐标并设置内联样式

Teleport 把菜单内容传过去后，菜单自身需根据事件坐标决定位置。常见方式：

1. 监听全局 contextmenu 事件，捕获 event.clientX 和 event.clientY
2. 将坐标传给菜单组件（如通过 props 或 provide/inject）
3. 菜单根元素使用 :style="{ left: x + 'px', top: y + 'px' }" 定位
4. 加一点偏移防贴边（例如 left: Math.min(x, window.innerWidth - width)）

避免滚动/缩放导致错位

单纯用 clientX/Y 在页面滚动或缩放时容易偏移。更健壮的做法：

1. 用 getBoundingClientRect() 获取视口相对坐标，再结合 window.scrollX/Y 计算绝对位置
2. 或直接用 event.pageX/event.pageY（兼容性好，已含滚动偏移）
3. 菜单容器设 position: fixed，这样定位不受父级 transform 或 overflow 影响

销毁与复用逻辑要清晰

右键菜单常需自动关闭或点击外部隐藏。注意：

1. 菜单显示后，监听一次 click 全局事件，点击非菜单区域就隐藏
2. 隐藏时不要移除 teleport 目标容器，只清空其 innerHTML 或用 v-if 控制显示
3. 若支持多级子菜单，建议用递归组件 + 同一 teleport 容器，靠层级嵌套和 CSS 定位区分