Vue3 - 超详细自定义浏览器右键菜单功能，在指定容器元素上屏蔽浏览器右键并弹出自定义的右键菜单功能（支持在 “任意容器“ 内弹出、自动计算弹出位置、可多级菜单、禁用菜单等功能）

前言

网上的教程都太乱了，而且功能 BUG 非常多且兼容性极差，很难复制改造使用。

本文 实现了在 vue3 项目开发中，在指定 DOM 容器内点击右键出现自定义操作菜单，自动计算弹出位置（不会出现碰撞窗口导致无法显示的问题）、多级菜单、菜单禁用等功能，

屏蔽浏览器右键菜单，鼠标右键弹出自己的菜单组件，全浏览器兼容且无 BUG。

---

如下图所示，无论在任何 “区域” 都能精准识别，并且自动判断位置（保证不会重叠遮挡），

您可以直接复制组件源码，运行起来稍微改改样式马上就能用了。

示例代码注释详细，无任何乱七八糟的废代码

组件源码

组件位置及名称无所谓，确保正确引入即可。