自定义的全局弹窗组件，会被其他第三方组件库的弹窗覆盖

写在前面

前几天出了一篇文章《记一次高版本view-design的组件迁移到自身项目的低版本》，在深度使用之后，发现该组件内部的z-index值会比其他第三方库的弹窗组件的z-index小，导致被遮挡。

解决方案

这里给大家介绍两种解决方案

1. 方案一：全部使用一方组件库的弹窗类型组件（modal, message, preview等），因为市面上目前针对这类型组件库中的组件都会采用同一个队列来维护，所以不会出现后出现的组件比先出现的组件的层级z-index高，来这里的估计是这种方法行不太通了的

2. 方案二：改变你当前组件的层级
   思路：找到当前页面上最高层级的元素，然后拿到它的z-index 属性值，然后就是把你想要层级最高的组件的z-index 设置的刚好超过最高层级的属性值就可以了。

代码如下：（可以回到我之前的那边博客看看，下面的代码是其中的一个方法）

getMaskIndex() {
      /** 获取当前最大的层级 */
      const element = document.elementFromPoint(10, 10);
      const zIndex = parseInt(element.style.getPropertyValue('z-index') || 0);
      transferIncrease();
      const currentIndex = this.maskIndex + transferIndex;

      /** 仅当页面存在大于当前组件的z-index才执行 */
      if (zIndex > currentIndex) {
        // 执行increase函数到刚好超过最大页面的层级
        for (let i = 0; i < zIndex - currentIndex; i++) {
          transferIncrease();
        }
      }
      return transferIndex;
    },

核心代码，document.elementFromPoint(10, 10), 找到最高层级的元素, 想要了解更多相关信息，可以去mdn文档查看

写在最后

如果博主帮到你们了，就给他点个赞吧，能帮助同行是我最开心的事情！