ElementPlus Tabs实现自定义右键菜单，关闭右侧、关闭其他

css样式

//右键菜单
.operation_right {
  position: fixed;
  background: $white;
  z-index: 1700;
  box-shadow: 0 0 5px $boxShadow;
  width: 100px;
  border-radius: 3px;
  .operation_right_li {
    line-height: 32px;
    text-align: center;
    width: 100%;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    padding: 0 12px;
  }
  .operation_right_li:hover {
    // background: $trHoverBg;
    color: $mainColor;
  }
}

怎么获取当前右键点击时的tab？ 通过查看 e.srcElement.id 发现id的值含有tab的id 值

const rightClick = (e) => {
  if (!editableTabs.value || editableTabs.value.length <= 1) return
  let currentContextTab = ''
  // 记录当前右击的菜单
  if (e.srcElement.id) {
    currentContextTab = e.srcElement.id.split('-')[1]
  }

  let comeInDistance = 8 //右键菜单顶部与鼠标箭头的距离
  // 每一个项 高 32px
  let boxHeight = 32 * 6
  if (window.innerHeight - e.clientY < boxHeight - comeInDistance) {
    comeInDistance = boxHeight - comeInDistance
  }
  // 矫正x
  // let ww = $(window).width()
  // let cx = e.clientX + 318 + 18 > ww ? ww - 318 - 18 : e.clientX
  contMenu.value = {
    offsetX: e.clientX - 8,
    offsetY: e.clientY - comeInDistance,
    isShowContMenu: true,
    curItem: currentContextTab
  }
}

最终实现效果：