Vue中无@click.right修饰符，右键事件应使用@contextmenu.prevent="handleRightClick"；.right仅适用于click事件且不跨浏览器稳定，而contextmenu是独立规范事件；可解构$event获取clientX/clientY或pageX/pageY定位菜单，并需添加边界检测及ESC/点击外部关闭逻辑。
Vue 中没有 @click.right 这样的修饰符。右键点击对应的原生事件是 contextmenu，不是 click 的变体，所以不能用 .right 修饰符——它根本不存在。
正确写法：用 @contextmenu.prevent 替代
Vue 提供了语义明确的事件名 @contextmenu，配合 .prevent 修饰符即可阻止浏览器默认右键菜单，并触发自定义逻辑：
-
@contextmenu.prevent="handleRightClick"是标准、简洁、推荐的方式 -
.prevent自动调用event.preventDefault()，无需手动写 - 事件对象
$event仍可传入方法，用于获取坐标等信息
为什么不能用 .right？
Vue 的鼠标按键修饰符（如 .left、.middle）只适用于 click 事件，且仅在支持 PointerEvent 的现代浏览器中稳定工作。而右键行为本质属于上下文菜单事件，规范上独立于 click。强行套用 @click.right 不会生效，控制台也无报错，容易误判。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
获取鼠标位置并定位菜单
在 handleRightClick 方法中，直接解构 $event 即可拿到屏幕坐标：
立即学习“前端免费学习笔记（深入）”；
-
event.clientX / event.clientY：相对于视口的坐标，适合position: fixed菜单 -
event.pageX / event.pageY：相对于整个文档的坐标，适合position: absolute场景 - 建议加边界检测，避免菜单超出窗口（例如
Math.min(event.clientX, window.innerWidth - menuWidth)）
配套关闭逻辑别漏掉
右键菜单弹出后，通常需支持以下关闭方式：
- 点击菜单外任意区域 → 监听
document的click事件 - 按 ESC 键 → 监听
keydown并判断event.key === 'Escape' - 菜单项点击后自动关闭 → 每个
@click处理器末尾设isMenuVisible = false
