elementUI中 el-tabs 标签管理右键菜单（elementui表格右键菜单）

最新推荐文章于 2025-09-05 10:37:26 发布

转载最新推荐文章于 2025-09-05 10:37:26 发布 · 2.1k 阅读

文章标签：

#elementui #前端 #javascript

本文介绍了如何在Vue项目中，利用`contextmenu.prevent.native`事件处理程序，实现对el-tabs标签页的右键菜单操作，如关闭左侧、右侧、其他标签以及关闭所有标签。

代码

contextmenu.prevent.native
e.srcElement.innerText
e.clientX
e.clientY

<template>
  <div class="box" @click="zvisible = false">
    <div
      v-show="zvisible"
      :style="{ left: left + 'px', top: top + 'px' }"
      class="zdiv"
    >
      <li @click="removeAll">关闭所有标签</li>
      <li @click="closeLeft">关闭左边标签</li>
      <li @click="closeRight">关闭右边标签</li>
      <li @click="closeOther">关闭其他标签</li>
    </div>
    <el-tabs
      v-model="activeName"
      type="card"
      @contextmenu.prevent.native="openRightMenu($event)"
    >
      <el-tab-pane
        v-for="item in tabArr"
        :key="item.title"
        :label="item.title"
        :name="item.name"
        >{{ item.name }}</el-tab-pane
      >
    </el-tabs>
  </div>
</template>
<style scoped>
.box {
  width: 100%;
  height: 600px;
  padding: 50px;
  box-sizing: border-box;
}

.zdiv {
  margin: 0;
  border: 1px solid rgb(187, 186, 186);
  background: rgb(255, 255, 255);
  z-index: 1000;
  position: absolute;
  list-style-type: none;
  padding: 5px;
  border-radius: 7px;
  font-size: 12px;
}
.zdiv li {
  margin: 0;
  padding: 5px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.zdiv li:hover {
  background: #e1e1e1;
  cursor: pointer;
}
</style>

<script>
export default {
  data() {
    return {
      activeName: "tab0",
      tabArr: [],
      zvisible: false, // 右键菜单是否显示
      left: 0, // 右键菜单的位置
      top: 0, // 右键菜单的位置
      currentTab: "", // 当前选中的tab
    };
  },
  mounted() {
    for (let index = 0; index < 20; index++) {
      let obj = {
        name: "ztab" + index,
        title: "ztab" + index,
        content: "ztab" + index,
        closable: true,
      };
      this.tabArr.push(obj);
    }
  },
  methods: {
    // tabs右键菜单
    openRightMenu(e) {
      this.zvisible = false;
      if (e.srcElement.id) {
        // 右键点击的是tab
        console.log(e);
        this.currentTab = e.srcElement.innerText;
        this.left = e.clientX;
        this.top = e.clientY;
        this.zvisible = true;
      }
      console.log(this.zvisible);
    },

    // 关闭所有标签
    removeAll() {
      this.tabArr = [];
      this.currentTab = "";
    },
    // 关闭左边标签
    closeLeft() {
      let index = 0;
      this.tabArr.forEach((el, i) => {
        if (this.currentTab == el.name) {
          index = i;
        }
      });
      let arr = this.tabArr.slice(index, this.tabArr.length);
      this.tabArr = [];
      arr.forEach((el) => {
        if (el.name != "index") {
          this.tabArr.push(el);
        }
      });

      // 数组第一个元素
      this.activeName = this.tabArr[0].name;
    },
    // 关闭右边标签
    closeRight() {
      let index = 0;
      this.tabArr.forEach((el, i) => {
        if (this.currentTab == el.name) {
          index = i;
        }
      });
      let arr = this.tabArr.slice(0, index + 1);
      this.tabArr = arr;

      // 数组最后一个元素
      this.activeName = this.tabArr[this.tabArr.length - 1].name;
    },
    // 关闭其他标签
    closeOther() {
      let obj = {}; // 当前标签
      this.tabArr.forEach((el) => {
        if (this.currentTab == el.name) {
          obj = el;
        }
      });
      this.tabArr = [obj];
      this.activeName = obj.name;
    },
  },
};
</script>