我攻克的技术难题 - BuildAdmin10：ElementPlus的弹出框，真的用不了

前言

我们在使用浏览器（例如chrome），或者一些IDE时，我们总会打开很多标签页，所以chrome和IDE提供了关闭所有、关闭右侧、关闭其他等批量关闭功能。

在BuildAdmin中，对导航栏的tab页同样也实现了这样的功能。如图所示：

可以看到，右键（contextmenu）点击tab就会弹出一个选项框，其中包括重新加载、关闭当前标签、关闭其他标签、当前标签全屏等功能。那么如何实现这样的一个弹出框，以及如何实现这些功能。

tab弹出框

BuildAdmin在src/components/contextmenu/index.vue中定义了弹出框组件。

从代码来看，就是使用了div，加ul、li标签，但是从class命名（以el-开头）来看，应该使用的是ElementPlus的组件渲染后的元素，这里先看弹出框效果，如下图。

接下来的工作就是实现弹出框、并填充内容，再实现各个功能模块。

实现弹出框

抛开BuildAdmin的代码不谈，如果让我自己来实现这样的弹出框组件，我肯定先去Element的官网看看什么组件符合我的预期。

Element提供的el-popover组件即可实现弹出框，直接拷贝官网代码，定义了一个ContextMenu.vue组件，实现如下：

trigger属性有click/focus/hover/contextmenu，选择contextmenu表示右键触发弹出框，插槽 #reference 是定义一个触发弹出框的元素，这里定义了一个按钮。

同事在ul中对props.items进行遍历渲染，props接收父组件传过来的值，tabs里面使用了ContextMenu组件，并绑定items传递标签列表。

其中ContextMenuItem是自定义的一个interface，用来定义标签字段。

export interface ContextMenuItem {
    name: string
    label: string
    icon?: string
    disabled?: boolean
}

disabled用来设置此标签功能是否可用，这个属性尤为关键。我们先看上面代码的渲染结果：

我们可以看到，在tab栏中出现了一个点击按钮，右键这个按钮就会出现弹出框，但是我的诉求是点击tab触发弹出框，这不太符合我们的要求。在研究了popover之后，发现el-popover的缺点：必须在插槽中定义一个按钮用来触发弹出框。

在Playground中进行测试，在删除了reference的slot之后，就会报错。

上面也说了BuildAdmin没有使用el-popover，使用的el-popover渲染后的html元素。通过对我使用的el-popover进行控制台查看元素，也证实了这一点：

所以，我使用的也是渲染后popover。原因有二：

1. 必须绑定触发元素（按钮），将tab插入提供的reference插槽比较麻烦
2. 弹出框箭头的位置是根据触发按钮长度来确定的，无法修改

所以，最后将控制台中渲染后的原始元素拷贝过来，只保留弹出框部分，去掉点击按钮。

再定义一些css样式。

css

.ba-contextmenu {
      z-index: 9999;
}
.el-popper,
.el-popper.is-light .el-popper__arrow::before {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border: none;
}
.el-dropdown-menu__item {
    padding: 8px 20px;
    user-select: none;
}
.el-dropdown-menu__item .icon {
    margin-right: 5px;
}

z-index设置成9999表示在弹出框位于最上层，user-select设置none，标签就无法被选中，其他的就是对间距的设置，可以按照自己需求调整。

这样就实现了弹出框组件，接下里就是要考虑如何将弹出框和每个tab绑定，并实现五个功能模块。

结语

这里先抛出第一个问题：在tab栏中点击哪里，弹出框就出现在哪里，这个是怎么实现的？

我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！