前言NutUI是一个京东风格的移动端Vue组件库，生态覆盖面广，支持按需加载、主题自定义、多语言等，功能强大。目前在用京东项目40+，设计精美，风格统一。NutUI在开发组件库的过程中，如何处理组件之间的层级关系？今天就来分析一下NutUI中处理层级关系的公共组件弹窗。1、什么是弹窗？它是一个公共组件，很多带有弹出层的组件都是基于这个组件开发的。封装这个组件首先解决了重新发明轮子的问题，避免了多个组件不得不开发这个公共功能。但是，它的优点不仅限于此，它还有以下优点：1、动态处理层级关系，保证后面触发的子弹窗口显示在最上面。2、多个弹窗组件同时显示时，维护一个遮罩层，动态处理遮罩层关系。这篇文章主要包括三个方面：层次关系的动态处理掩膜层管理滚动渗透问题2.层次关系的动态处理2.1．为什么要处理等级关系？当前页面顶部显示弹框、Toast提示等，那么如何定义它们的zIndex来保证当前显示的内容在页面顶部呢？正常开发时，可能会根据具体业务调整zIndex，保证外层组件的zindex值最大。然而，实际情况可能更复杂。由于不同的开发人员接手，各种业务需求迭代，在实际开发过程中可能会出现各种问题，很容易通过更改一个zIndex来“换一身”，从而导致很多其他问题，甚至将zIndex设置为无效.下面整理一下处理层次问题的各种方案。2.2.如何设置zIndex2.2.1。PLANA有人说可以统一所有组件的zIndex，从而遵循“后来居上”的规则，开发者只要在代码中调整组件的顺序，就可以保证层次关系。当级联层级相同，级联顺序相同时，DOM流中后面的元素会覆盖前面的元素。这样处理确实可以解决一部分问题，但是还是存在很多隐患。比如在最外层显示哪个弹窗可能是由用户的点击顺序决定的，不是一成不变的，每个人的开发习惯不同，有时很难统一。基于这种情况，我们可以采用统一动态的方式来生成zIndex：在组件库中，我们可以对组件库的zIndex值做一个统一的处理，每次调用动态+1。让zIndex=2000;functiongetZIndex(){return++zIndex}然后每次调用时动态赋值this.$el.style.zIndex=getZIndex()；zIndex变量可以在组件库中通过这种方式统一管理，但并不适用于所有的开发情况，比如代码中充斥着各种类型的组件，zIndex就没有统一管理。然后可以使用PLANB来动态计算最大zIndex。2.2.2.PLANB这里介绍遍历DOM节点动态计算最大zIndex值的方法。getZIndex(){return[...document.all].reduce((r,e)=>Math.max(r,+window.getComputedStyle(e).zIndex||0),0)}这个方法可以使你得到此刻最大的zIndex，然后你可以给它加1。2.3.堆叠上下文（stackingcontext）在实际开发中，仅仅设置zIndex可能是不够的，即使我们将zIndex设置为最大，也不一定会显示在最上面。因为zIndex只会在当前的堆栈上下文中起作用。因此，单独设置zIndex并不全面，还必须考虑堆叠上下文的因素。我们先看下面的代码：
