以前有在后台管理项目中使用顶部标签栏切换不同菜单。标签栏过多可以通过 鼠标右键 展开菜单栏进行 全部关闭 或者 关闭其他 等 *** 作，最近重写这个需求时发现 element ui 的 el-tab 组件做标签栏很方便，于是就替换了原来自定义的标签栏，但是也遇到了不少问题，这里做一下总结，记录一下。
这篇文章主要是讲实现 右键菜单 ，如何设置 顶部的标签栏 与 侧边的导航栏 的绑定我近期会更新另外一篇文章。这里就不介绍了。
菜单栏 使用相对定位，每次 鼠标 右键点击时获取 鼠标相对于页面的位置 和 鼠标在盒子中的位置 。设置 菜单栏 出现到指定的位置。
利用 contextmenu 事件阻止浏览器原生的 菜单栏 出现，后自定义我们要显示的 菜单栏 。正常来说我们一般在各个 el-tab-pane 上绑定 @contextmenu 就可以实现对应的功能，但是 el-tabs 组件并没有 $emit 对应的方法，加上了 .native 修饰符也不起作用。所以最终决定在每次 路由 改变时获取到所有的 el-tab-pane 节点，手动的去绑定 contextmenu 事件。
注： 这里需要注意的有2点
注： 有关 getBoundingClientRect 详情请移步 getBoundingClientRect
以前的实现自定义菜单栏 blog 虽然看不到了，但是有被收录到 JavaScript中文网 社区，是另外的一种实现方法 vue自定义右键菜单
最后，喜欢的话请点个赞呗 ❤️❤️。
1、先按住鼠标左键，然后将鼠标移动到目标处，点击鼠标右键，一两秒之后，右键菜单就出来了。2、单击鼠标右键(不要放开鼠标右键)，将鼠标移到警告窗口处，点击鼠标左键，关闭窗口，再将鼠标移回目标处，放开鼠标右键就可以了。
3、点击网页窗口上方的工具栏，进入Internet选项——安全——自定义级别——设置，找到脚本的设置，即Java小程序脚本、活动脚本和允许通过脚本进行粘贴设置三个脚本，设为禁用。确定后，刷新网页，就可以了。提醒网民朋友，用完后一定记得要重新将三个脚本设置还原为启用，要不有些网页显示会不正常。以上就是elementui在麒麟机器上右键菜单有问题解决方法。
element对象添加点击事件
也就是element对象名称.onclick = function(){
alert("点击事件")
}
下面是一个简单的例子：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let button=document.createElement("button")
button.innerText = "按钮"
//添加点击事件
button.onclick = function () {
alert("点击事件")
}
document.body.appendChild(button)
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）