refactor(Popup): create overlay for every popup (#6357)

src/mixins/popup/overlay.ts

@@ -1,6 +1,7 @@
 import Overlay from '../../overlay';
 import { context } from './context';
 import { mount } from '../../utils/functional';
+import { removeNode } from '../../utils/dom/node';
 
 export type OverlayConfig = {
   zIndex?: number;
@@ -13,71 +14,61 @@ const defaultConfig: OverlayConfig = {
   customStyle: {},
 };
 
-let overlay: any;
-
-// close popup when click overlay && closeOnClickOverlay is true
-function onClickOverlay(): void {
-  if (context.top) {
-    const { vm } = context.top;
-    vm.$emit('click-overlay');
-
-    if (vm.closeOnClickOverlay) {
-      if (vm.onClickOverlay) {
-        vm.onClickOverlay();
-      } else {
-        vm.close();
-      }
-    }
-  }
-}
-
-function mountOverlay() {
-  overlay = mount(Overlay, {
+function mountOverlay(vm: any) {
+  return mount(Overlay, {
     on: {
-      click: onClickOverlay,
+      // close popup when overlay clicked & closeOnClickOverlay is true
+      click() {
+        vm.$emit('click-overlay');
+
+        if (vm.closeOnClickOverlay) {
+          if (vm.onClickOverlay) {
+            vm.onClickOverlay();
+          } else {
+            vm.close();
+          }
+        }
+      },
     },
   });
 }
 
-export function updateOverlay(): void {
-  if (!overlay) {
-    mountOverlay();
-  }
-
-  if (context.top) {
-    const { vm, config } = context.top;
+export function updateOverlay(vm: any): void {
+  const item = context.find(vm);
 
+  if (item) {
     const el = vm.$el;
+    const { config, overlay } = item;
+
     if (el && el.parentNode) {
       el.parentNode.insertBefore(overlay.$el, el);
-    } else {
-      document.body.appendChild(overlay.$el);
     }
 
     Object.assign(overlay, defaultConfig, config, {
       show: true,
     });
-  } else {
-    overlay.show = false;
   }
 }
 
 export function openOverlay(vm: any, config: OverlayConfig): void {
-  if (!context.stack.some((item) => item.vm === vm)) {
-    context.stack.push({ vm, config });
-    updateOverlay();
+  if (!context.find(vm)) {
+    const overlay = mountOverlay(vm);
+    context.stack.push({ vm, config, overlay });
   }
+
+  updateOverlay(vm);
 }
 
 export function closeOverlay(vm: any): void {
-  const { stack } = context;
+  const item = context.find(vm);
+  if (item) {
+    item.overlay.show = false;
+  }
+}
 
-  if (stack.length) {
-    if (context.top.vm === vm) {
-      stack.pop();
-      updateOverlay();
-    } else {
-      context.stack = stack.filter((item) => item.vm !== vm);
-    }
+export function removeOverlay(vm: any) {
+  const item = context.find(vm);
+  if (item) {
+    removeNode(item.overlay.$el);
   }
 }