V-cli结合element ui实现右键自定义菜单

Posted 2023-03-16

参考技术A

以前有在后台管理项目中使用顶部标签栏切换不同菜单。标签栏过多可以通过 鼠标右键 展开菜单栏进行 全部关闭 或者 关闭其他 等操作，最近重写这个需求时发现 element ui 的 el-tab 组件做标签栏很方便，于是就替换了原来自定义的标签栏，但是也遇到了不少问题，这里做一下总结，记录一下。

这篇文章主要是讲实现 右键菜单 ，如何设置 顶部的标签栏 与 侧边的导航栏 的绑定我近期会更新另外一篇文章。这里就不介绍了。

菜单栏 使用相对定位，每次 鼠标 右键点击时获取 鼠标相对于页面的位置 和 鼠标在盒子中的位置 。设置 菜单栏 出现到指定的位置。

利用 contextmenu 事件阻止浏览器原生的 菜单栏 出现，后自定义我们要显示的 菜单栏 。正常来说我们一般在各个 el-tab-pane 上绑定 @contextmenu 就可以实现对应的功能，但是 el-tabs 组件并没有 $emit 对应的方法，加上了 .native 修饰符也不起作用。所以最终决定在每次 路由 改变时获取到所有的 el-tab-pane 节点，手动的去绑定 contextmenu 事件。

注： 这里需要注意的有2点

注： 有关 getBoundingClientRect 详情请移步 getBoundingClientRect

以前的实现自定义菜单栏 blog 虽然看不到了，但是有被收录到 javascript中文网 社区，是另外的一种实现方法 vue自定义右键菜单

最后，喜欢的话请点个赞呗 ❤️❤️。