vue2实现el-tab的内容框右击关闭除了首页的其他所有页面

效果图

    <!-- 右键功能 -->
    <div v-show="contextMenuVisible">
      <ul :style="{left:menuLeft +'px',top:menuTop+'px'}" class="contextmenu">
        <li>
          <el-button type="text" @click="closeAll" size="mini"  icon="el-icon-error">关闭所有</el-button>
        </li>
      </ul>
    </div>



  data() {
    return {
      contextMenuVisible: false,
      menuLeft: 0,
      menuTop: 0,
  }
 },


 methods: {
    //显示右击菜单（关闭所有）
    openContextMenu(e){
      e.preventDefault(); //防止默认菜单弹出
      this.contextMenuVisible = true;
      //返回鼠标坐标点，并传递给菜单的绝对定位值
      this.menuLeft = e.clientX;
      this.menuTop = e.clientY + 20;
    },
    //隐藏菜单
    closeMenu(){
      this.contextMenuVisible = false
    },  
    handleClose(key, keyPath) {
		  this.$refs.menus.open(keyPath);
	  },

    //一键关闭
    closeAll(){
      this.$store.commit('delete_tabsALL',1)
      this.$router.push({ path: '/home/index' })

      this.closeMenu(); //完成点击事件后，关闭菜单
    },

}


  mounted() {
    //给tab绑定右击事件
    let tab_top_dom = document.getElementsByClassName('el-tabs__header is-top')
    tab_top_dom[0].oncontextmenu = this.openContextMenu
  },


 watch: {
      
    contextMenuVisible() { //监听 右键关闭菜单 点击任何地方 菜单消失
      if (this.contextMenuVisible) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
  },




<style lang="scss" scoped>
.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 2px;
 
    }
    .contextmenu li:hover {
        background: #f2f2f2;
        cursor: pointer;
    }
    .contextmenu li button{
      color: #2c3e50;
    }