Element Tabs 标签页实现右键自定义菜单

如果tab标签页比较多的话，一个个关闭比较麻烦，可以右键显示菜单，关闭所有的标签页或者特定的标签页

要解决的问题

1、如何在el-tabs 上绑定右键事件

可以使用 @contextmenu.prevent.native="openContextMenu($event)"

代码语言：javascript复制

            <el-tabs
              :value="activeTabItem"
              @tab-remove="closeTab"
              @tab-click="tabClick"
              @contextmenu.prevent.native="openContextMenu($event)"
            >
              <el-tab-pane label="首页" name="adminIndex"></el-tab-pane>
              <el-tab-pane
                v-for="item in tabs"
                :label="item.label"
                :key="item.id"
                :name="item.id"
                :closable="item.closable"
              >               
              </el-tab-pane>
            </el-tabs>

2、怎么获取当前右键点击时的tab

通过查看 e.srcElement.id 发现id的值含有tab的id 值 ，因为在el-tab-pane 绑定的name值  :name="item.id" 就是tab的id值，只要获取当前右键点击时的tab的id值就知道当前的tab

代码语言：javascript复制

openContextMenu(e) {
      //console.log(e.srcElement);
      if (e.srcElement.id) {
        let currentContextTabId = e.srcElement.id.split("-")[1];
        this.contextMenuVisible = true;
        this.$store.commit("saveCurContextTabId", currentContextTabId);
        this.left = e.clientX;
        this.top = e.clientY   10;
      }
    },

代码语言：javascript复制

            <ul
              v-show="contextMenuVisible"
              :style="{left:left 'px',top:top 'px'}"
              class="contextmenu"
            >
              <li @click="closeAllTabs">关闭所有</li>
              <li @click="closeOtherTabs('left')">关闭左边</li>
              <li @click="closeOtherTabs('right')">关闭右边</li>
              <li @click="closeOtherTabs('other')">关闭其他</li>
            </ul>

关闭事件

代码语言：javascript复制

// 关闭所有标签页
    closeAllTabs() {
      this.$store.commit("closeAllTabs");
      this.contextMenuVisible = false;
    },
    // 关闭其它标签页
    closeOtherTabs(par) {
      this.$store.commit("closeOtherTabs", par);
      this.contextMenuVisible = false;
    },
    // 关闭contextMenu
    closeContextMenu() {
      this.contextMenuVisible = false;
    },

关闭右键菜单，有时候打开右键菜单没有进行其它操作，右键菜单一直显示

代码语言：javascript复制

watch: {
    contextMenuVisible(value) {
      if (this.contextMenuVisible) {
        document.body.addEventListener("click", this.closeContextMenu);
      } else {
        document.body.removeEventListener("click", this.closeContextMenu);
      }
    }
  },

vuex

代码语言：javascript复制

    // 保存右键点击tab的id
    saveCurContextTabId(state, curContextTabId) {
      state.curContextTabId = curContextTabId
    },
    // 关闭所有标签
    closeAllTabs(state) {
      state.tabs = [];
      this.commit("switchTab", "adminIndex")
      router.push("/home")
    },
    // 关闭其它标签页
    closeOtherTabs(state, par) {
      let tabs = state.tabs;
      let length = tabs.length;
      let curContextTabId = state.curContextTabId;
      let activeTabItem = state.activeTabItem
      console.log(activeTabItem)
      let id; // 右键点击时的tab在整个tabs数组中的id
      let curId // 左键点击时的tab在整个tabs数组中的id
      tabs.forEach((tab, index) => {
        if (tab.id == curContextTabId) {
          id = index
        }
        if (tab.id == activeTabItem) {
          curId = index
        }
      })
      //  console.log(id, curId)
      //  return
      if (par == "left") {
        if (id > curId) {
          this.commit("switchTab", curContextTabId)
          router.push(tabs[id].path)
        }
        state.tabs = state.tabs.slice(id, length)
      }
      if (par == "right") {
        if (id < curId) {
          this.commit("switchTab", curContextTabId)
          router.push(tabs[id].path)
        }
        state.tabs = state.tabs.slice(0, id   1)
      }
      if (par == "other") {
        state.tabs = [state.tabs[curId]]
      }
    }

右键显示的菜单样式

代码语言：javascript复制

.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: 7px 16px;
}
.contextmenu li:hover {
  background: #f2f2f2;
  cursor: pointer;
}

contextmenu el native tabs vuex

0 人点赞