实现效果图
实现思路：
一、实现右击菜单的div
html内容
<div v-show="contextMenuVisible">
<ul :style="{left:menuLeft +'px',top:menuTop+'px'}" class="contextmenu">
<li><el-button type="text" @click="closeAll()" size="mini">关闭所有</el-button></li>
</ul>
</div>
- 用v-show控制显示和隐藏菜单盒子
- 给 关闭所有 绑定点击事件
二、CSS样式
.contextmenu {
width: 100px;
margin: 0;
border: 1px solid #ccc;
background: #fff;
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 14px;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
}
.contextmenu li {
margin: 0;
padding: 0px 22px;
}
.contextmenu li:hover {
background: #f2f2f2;
cursor: pointer;
}
.contextmenu li button{
color: #2c3e50;
}
三、给tab绑定右击事件
由于不能直接在标签中绑定，所以需要在mounted中绑定
详细情况，如问题模块所示。
添加代码：
mounted() {
let tab_top_dom = document.getElementsByClassName('el-tabs__header is-top')
tab_top_dom[0].oncontextmenu = this.openContextMenu
}
四、实现右击弹出菜单栏事件
1.首先，在data()中添加控制显示隐藏的值
contextMenuVisible: false, //右键关闭显/隐藏
2.添加methods方法
//显示右击菜单（关闭所有）
openContextMenu(e){
e.preventDefault(); //防止默认菜单弹出
this.contextMenuVisible = true;
//返回鼠标坐标点，并传递给菜单的绝对定位值
this.menuLeft = e.clientX;
this.menuTop = e.clientY + 20;
},
//隐藏菜单
closeMenu(){/
this.contextMenuVisible = false
},
3.实现 关闭所有 功能
closeAll(){ // 关闭所有标签卡
this.tabsItem = [
{
title: '首页',
name: '1',
closable: false,
ref: 'tabs',
content: HomePage
}
];
this.activeTab = '1';
this.tabIndex = 1;
this.closeMenu(); //完成点击事件后，关闭菜单
},
五、监听点击事件，点击菜单以外的地方，实现菜单隐藏
在watch中添加
watch(){
contextMenuVisible() { //监听 右键关闭菜单 点击任何地方 菜单消失
if (this.contextMenuVisible) {
document.body.addEventListener("click", this.closeMenu);
} else {
document.body.removeEventListener("click", this.closeMenu);
}
},
}
遇到的问题：
1.直接对标签绑定右键点击事件，成功绑定，但是不仅tab标签部分绑定了，而且内容区域也绑定了，在整个tab区域内都可以右击实现菜单弹出
如下代码所示：
<el-tabs v-model="activeTab" type="card" @tab-remove="removeTab" @tab-click="tabClick"
@contextmenu.prevent.native="openContextMenu">
<el-tab-pane v-for="(item) in tabsItem"
:key="item.name"
:label="item.title"
:name="item.name"
:closable="item.closable"
:ref="item.ref"> >
<component :is="item.content"></component>
</el-tab-pane>
</el-tabs>
这样就没有浏览器默认的右击事件了，而且用户体验感很差，所以不能直接加到标签里
解决办法：
- 通过浏览器找到tab生成标签的class类名，精确定位需要右键事件的标签部分。
- 在页面加载完成之后，为其绑定右键事件
代码如下：
mounted() {// 使用原生js 为单个dom绑定鼠标右击事件
let tab_top_dom = document.getElementsByClassName('el-tabs__header is-top')
tab_top_dom[0].oncontextmenu = this.openContextMenu
}
**2.解决vue中的报错[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'preventDefault' of undefined"**
网址：解决办法
说明：
- 问题出的不太一样，但是解决方法管用
- 在mounted()里面调用函数时，多加了括号()
解决方案: 去掉即可
3. vue报错：Invalid prop: type check failed for prop "index". Expected String with value 解决方法： 原来是elementUI的：index字段为字符串格式，后台数据为num格式，格式警告，格式转换，问题解决！知识点：
1、CSS旋转45度
transform:rotate(45deg);
2、引入阿里巴巴矢量图标库
选择图标，加入购物车，下载代码压缩包
（1）Unicode 引用
1.解压后，把font文件夹copy到vue项目的公共文件目录下
2.在公共css文件中，加入以下代码
@font-face {
font-family: 'iconfont';
src: url('iconfont.ttf?t=1627459271213') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
3.挑选相应图标并获取字体编码，应用于页面
<span class="iconfont">3</span>
（2）font-class 引用
1.引入项目下生成的fontclass代码
<link rel="stylesheet" href="./iconfont.css">
2.挑选相应图标并获取类名，应用于页面
<span class="iconfont icon-xxx"></span>
参考项目地址：https://github.com/zhangjiangmse/back_menu.git
解决办法原地址：https://blog.csdn.net/qq_28200505/article/details/105791303
