Implementation of right-click custom menu for Element Tabs

If there are many tabs, it is troublesome to close one by one. You can right-click the menu to close all tabs or specific tabs

Problems to be solved

1. How to bind right click events on El tabs

You can use @ contextmenu.prevent.native="openContextMenu($event)"

            <el-tabs
              :value="activeTabItem"
              @tab-remove="closeTab"
              @tab-click="tabClick"
              @contextmenu.prevent.native="openContextMenu($event)"
            >
              <el-tab-pane label="home page" 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. How to get the current tab when right clicking

By viewing e.srcElement.id, it is found that the ID value of the tab contains the ID value of the tab. Because the name value bound in the El tab pane: name="item.id" is the ID value of the tab. As long as you get the ID value of the tab when you right-click, you will know the current tab

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;
      }
    },
            <ul
              v-show="contextMenuVisible"
              :style="{left:left+'px',top:top+'px'}"
              class="contextmenu"
            >
              <li @click="closeAllTabs">Close all</li>
              <li @click="closeOtherTabs('left')">Turn left</li>
              <li @click="closeOtherTabs('right')">Close the right side.</li>
              <li @click="closeOtherTabs('other')">Close other</li>
            </ul>

Closing event

// Close all tabs
    closeAllTabs() {
      this.$store.commit("closeAllTabs");
      this.contextMenuVisible = false;
    },
    // Close other tabs
    closeOtherTabs(par) {
      this.$store.commit("closeOtherTabs", par);
      this.contextMenuVisible = false;
    },
    // Close contextMenu
    closeContextMenu() {
      this.contextMenuVisible = false;
    },

Close the right-click menu. Sometimes the right-click menu is opened without other operations. The right-click menu is always displayed

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

vuex

    // Save the id of the right-click tab
    saveCurContextTabId(state, curContextTabId) {
      state.curContextTabId = curContextTabId
    },
    // Close all labels
    closeAllTabs(state) {
      state.tabs = [];
      this.commit("switchTab", "adminIndex")
      router.push("/home")
    },
    // Close other tabs
    closeOtherTabs(state, par) {
      let tabs = state.tabs;
      let length = tabs.length;
      let curContextTabId = state.curContextTabId;
      let activeTabItem = state.activeTabItem
      console.log(activeTabItem)
      let id; // The id of the right-click tab in the entire tabs array
      let curId // The id of the tab in the whole tabs array when left clicking
      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]]
      }
    }

Right click menu style

.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;
}

Tags: Front-end

Posted on Sat, 11 Apr 2020 09:05:28 -0700 by rkrass