Vue+ElementUI实现给Tab页添加鼠标右键菜单栏

一、背景

ElementUI官网上提供的Tabs标签只提供了基础的增加和删除标签页的功能，远远不能满足我们的需求。
我们想要对标签页完成更多更能时，就需要自己实现了，比如下图谷歌浏览器的标签页右键功能。

在jQuery配合EasyUI实现此类操作时，我们会首先想到右键菜单栏的方式，那么在使用Vue 和 ElementUI时，我们也将自己实现右键菜单栏的效果，效果图如下：

二、实现思路

（一）实现左侧菜单栏的div

<div v-show="contextMenuVisible">
	<ul :style="{left:left+'px',top:top+'px'}" class="contextmenu">
	    <li><el-button type="text" @click="curTabReload()" size="mini">重新加载</el-button></li>
	    <li><el-button type="text" @click="closeAllTabs()" size="mini">关闭所有</el-button></li>
	    <li><el-button type="text" @click="closeOtherTabs('left')" :disabled="isDisabledCloseLeftBtnFlag" size="mini">关闭左边</el-button></li>
	    <li><el-button type="text" @click="closeOtherTabs('right')" :disabled="isDisabledCloseRightBtnFlag" size="mini">关闭右边</el-button></li>
	    <li><el-button type="text" @click="closeOtherTabs('other')" size="mini">关闭其他</el-button></li>
	</ul>
</div>

使用v-show控制，是否显示菜单栏。
使用disabled控制某种情况下，按钮是否可用。
样式如下：

.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页的Tab标签部位绑定右键点击事件。

el-tabs标签，生成html后，代码如下图所示：

如果我们直接对el-tabs标签绑定右键点击事件，比如下列代码：

<el-tabs @contextmenu.prevent.native="openContextMenu">
	<el-tab-pane>
		<router-view></router-view>
	</el-tab-pane>
</el-tabs>
<script>
 methods: {
	 openContextMenu(e) {
	 }
}
</script>

这种做法，可以成功绑定右键事件，但却不仅是为Tab标签部分绑定了右键事件。通过查看网页代码，就会发现，Tab的内容部分也被绑定了右键事件，这就会导致Tab内容部分，在浏览器上的表现为，浏览器默认的右键事件也失效了，也就是说无法再进行精准地元素检查的操作了，那将是会非常痛苦的。
解决思路：
通过浏览器找到Tab生成标签的class，精准定位需要右键事件的标签部分。
在页面加载完成后，为其绑定上右键事件。
使用如下方式：

mounted() {
	// 获取dom
	let tab_top_dom = document.body.getElementsByClassName("el-tabs__header is-top")
	// 使用原生js 为单个dom绑定鼠标右击事件
	tab_top_dom[0].oncontextmenu = this.openContextMenu
}

注：在vue中获取 dom可以使用ref的方式，但是本例中，Tab的标签部分，并非显式的出现在代码中，而是ElementUI框架内的部分，因此采用了原生的js方式。

（三）实现弹出右侧菜单栏事件

① 获取当前的右键选中的Tab，记录下标签的特征（比如名称）
② 以数据驱动的方式，修改菜单栏div的属性，使其显示。
③附加项：在显示菜单栏div之前，可以对当前Tab所处的位置进行判断，对于最左侧Tab，将“关闭左侧标签页”的按钮设置为不可用；对于最右侧Tab，将“关闭右侧标签页”的按钮设置为不可用。
实现方式如下：

/*
右击事件
  */
openContextMenu(e) {
    e.preventDefault(); //防止默认菜单弹出
     
    let obj = e.srcElement ? e.srcElement : e.target;

    if (obj.id) {
        let currentContextTabId = obj.id.split("-")[1];
        let curIndex = 0;
        for(;curIndex<this.editableTabs.length;++curIndex){
            if(this.editableTabs[curIndex].title == currentContextTabId){
                break;
            }
        }
        if(curIndex<=0){
            this.isDisabledCloseLeftBtnFlag = true
            this.isDisabledCloseRightBtnFlag = false
        }else if(curIndex >= this.editableTabs.length-1){
            this.isDisabledCloseLeftBtnFlag = false
            this.isDisabledCloseRightBtnFlag = true
        }else{
            this.isDisabledCloseLeftBtnFlag = false
            this.isDisabledCloseRightBtnFlag = false
        }
        this.contextMenuVisible = true;
        this.$store.commit("saveCurContextTabId", currentContextTabId);
        this.left = e.clientX;
        this.top = e.clientY + 10;
    }
},

注：
① 原生js方式实现时，要注意阻止弹出浏览器默认的菜单栏，即使用 e.preventDefault();
② 若跨组件了，则可以使用store的方式来对值进行存储和事件响应。

（四）实现右键菜单栏中的每一个点击事件

 
//刷新当前页
curTabReload(){
 	//TODO 重新载入当前标签页
    ... 
}
// 关闭所有标签页
closeAllTabs() {
    //TODO 关闭所有标签
    ... 
    //关闭菜单栏
    this.closeContextMenu()
},
// 关闭其它标签页
closeOtherTabs(par) {
    if (par == "left") {
       //TODO 关闭左侧所有标签
    		... 
    }
    if (par == "right") {
      //TODO 关闭右侧所有标签
    		... 
    }
    if (par == "other") {
        //TODO 关闭其他所有标签
    		... 
    }
     //关闭菜单栏
    this.closeContextMenu()
}

在完成点击事件的动作后，记得关闭菜单栏。

 // 关闭contextMenu
 closeContextMenu() {
	this.contextMenuVisible = false;
 },

详细实现，可参考项目。
项目地址：https://github.com/zhangjiangmse/back_menu.git