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