Vue3 + Element Plus 实现动态标签页及右键菜单实现的问题？

Question

在制作标签栏右击的选项中，使用右击选择不同标签的关闭
但是el-tab-pane中，加入 @contextmenu.prevent="this.openContextMenu($event)"失效，而el-tabs有效，但是我就不清楚点的那个标签了

    <el-tabs
        type="card"
        class="tab_class"
        closable
        @tab-remove="this.removeTab"

        @tab-change="this.tabChange"
    >
      <el-tab-pane
          class="tab_pane_class"
          v-for="item in this.tabList"
          :key="item.fullPath"
          :name="item.fullPath"
          :label="item.name"
          @contextmenu.prevent="this.openContextMenu($event)"
      >
      </el-tab-pane>
    </el-tabs>

然后请问一下还有别的方法吗？

https://blog.csdn.net/weixin_36757282/article/details/126578206
试了这个博客的的方法，但是加入 el-tab-pane循环中，直接报错，请大佬帮一下

Answer 1

使用tab-pane的label插槽来自定义标题内容 然后再监听自定义内容的contextmenu事件 这是一个示例

Answer 2

<div
      v-if="contextmenuFlag"
      class="tags__contentmenu"
      :style="{ left: contentmenuX + 'px', top: contentmenuY + 'px' }"
    >
     右键内容
    </div>

 <el-tabs
        v-model="active"
        type="card"
        @contextmenu="handleContextmenu"
        :closable="tagLen !== 1"
        @tab-click="openTag"
        @edit="menuTag"
        @tab-remove="handleRemove"
      >

    handleContextmenu(event) {
      let target = event.target;
      let flag = false;
      if (target.className.indexOf('el-tabs__item') > -1) flag = true;
      else if (target.parentNode.className.indexOf('el-tabs__item') > -1) {
        target = target.parentNode;
        flag = true;
      }
      if (flag) {
        event.preventDefault();
        event.stopPropagation();
        this.contentmenuX = event.clientX;
        this.contentmenuY = event.clientY;
        this.tagName = target.getAttribute('aria-controls').slice(5);
        this.contextmenuFlag = true;
      }
    },

Answer 3

找到了一个简单方法

function openContextMenu(event) {
  // 自己写的
  if (event.srcElement.id) {
    let fullPath = event.srcElement.id.split("-")[1]
    selectedTag.value = useTagsViewStore().visitedViews.find(item => item.fullPath == fullPath)
    dropdown.value.handleClose()
    let rect = event.currentTarget.getBoundingClientRect()
    setTimeout(() => {
      dropdown.value.$el.style.left = event.clientX - rect.left - event.offsetX + event.layerX + 'px'
      dropdown.value.$el.style.top = event.clientY - rect.top - event.offsetY - 35 + 'px'
      dropdown.value.handleOpen()
    }, 50)
  }
}

Answer 4

在使用Vue.js和Element Plus框架时，实现标签页的右键菜单功能通常需要一些额外的处理，因为el-tab-pane组件并不直接支持@contextmenu事件。在您提供的代码示例中，尝试在el-tab-pane上使用@contextmenu.prevent事件处理程序，但这个方法可能不会按预期工作，因为el-tab-pane不触发contextmenu事件。

一种解决方案是使用el-tabs组件来监听contextmenu事件，并在事件处理程序中确定哪个标签页被右键点击。以下是实现这一功能的一种方法：

1. 移除el-tab-pane上的@contextmenu.prevent事件监听器。
2. 在el-tabs上添加@contextmenu事件监听器。
3. 在@contextmenu事件处理程序中，使用$event参数来获取鼠标点击的位置，并确定是哪个标签页被点击。
4. 根据点击的标签页，显示相应的右键菜单。

下面是一个示例代码：

<template>
  <el-tabs
    type="card"
    class="tab_class"
    closable
    @tab-remove="removeTab"
    @tab-change="tabChange"
    @contextmenu="openContextMenu"
  >
    <el-tab-pane
      class="tab_pane_class"
      v-for="item in tabList"
      :key="item.fullPath"
      :name="item.fullPath"
      :label="item.name"
    >
      <!-- 内容 -->
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
// ... 其他代码 ...

const openContextMenu = (event) => {
  // 阻止默认的上下文菜单显示
  event.preventDefault();

  // 获取当前点击的标签页的name
  const activeName = getActiveTabName(event);

  // 显示右键菜单的逻辑
  // ...
};

const getActiveTabName = (event) => {
  const tabsEl = document.querySelector('.tab_class .el-tabs__content');
  const rect = tabsEl.getBoundingClientRect();
  const tabWidth = rect.width / tabsEl.children.length;

  // 计算点击位置所在的标签页
  const index = Math.floor((event.clientX - rect.left) / tabWidth);

  // 获取所有标签页的name
  const names = Array.from(tabsEl.children).map((child) => child.getAttribute('name'));

  // 返回被点击的标签页的name
  return names[index];
};
</script>

在这个示例中，我们首先阻止了默认的上下文菜单显示，然后通过计算点击位置和标签页宽度来确定被点击的标签页。最后，我们可以使用这个信息来显示自定义的右键菜单。

请注意，这个方法可能需要根据实际的布局和样式进行调整。此外，由于直接操作DOM，可能需要考虑不同浏览器和设备之间的兼容性问题。