Element Tabs 標簽頁實現右鍵自定義菜單

如果tab標簽頁比較多的話，一個個關閉比較麻煩，可以右鍵顯示菜單，關閉所有的標簽頁或者特定的標簽頁

要解決的問題

1、如何在el-tabs 上綁定右鍵事件

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

            <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

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">關閉所有</li> <li @click="closeOtherTabs('left')">關閉左邊</li> <li @click="closeOtherTabs('right')">關閉右邊</li> <li @click="closeOtherTabs('other')">關閉其他</li> </ul>

關閉事件

// 關閉所有標簽頁 closeAllTabs() { this.$store.commit("closeAllTabs"); this.contextMenuVisible = false; }, // 關閉其它標簽頁 closeOtherTabs(par) { this.$store.commit("closeOtherTabs", par); this.contextMenuVisible = false; }, // 關閉contextMenu closeContextMenu() { this.contextMenuVisible = false; },

關閉右鍵菜單，有時候打開右鍵菜單沒有進行其它操作，右鍵菜單一直顯示

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

vuex

    // 保存右鍵點擊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]] } }

右鍵顯示的菜單樣式

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