@whitesev/pops 3.3.5 → 4.0.0

package/dist/types/src/handler/PopsInstHandler.d.ts

@@ -0,0 +1,67 @@
+import type { PopsAlertConfig } from "../components/alert/types";
+import type { PopsConfirmConfig } from "../components/confirm/types";
+import type { PopsDrawerConfig } from "../components/drawer/types";
+import type { PopsFolderConfig } from "../components/folder/types";
+import type { PopsIframeConfig } from "../components/iframe/types";
+import type { PopsLoadingConfig } from "../components/loading/types";
+import type { PopsPanelConfig } from "../components/panel/types";
+import type { PopsPromptConfig } from "../components/prompt/types";
+import type { PopsInstGeneralConfig } from "../types/inst";
+import type { PopsInstStoreType } from "../types/main";
+export declare const PopsInstHandler: {
+    /**
+     * 删除配置中对应的对象
+     * @param totalInstConfigList 配置实例列表
+     * @param  guid 唯一标识
+     * @param isAll 是否全部删除
+     */
+    removeInstance(totalInstConfigList: PopsInstGeneralConfig[][], guid?: string, isAll?: boolean): Promise<PopsInstGeneralConfig[][]>;
+    /**
+     * 隐藏
+     * @param popsType
+     * @param instConfigList
+     * @param guid
+     * @param config
+     * @param $anim
+     * @param $mask
+     */
+    hide(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, popsType: PopsInstStoreType, instConfigList: PopsInstGeneralConfig[], guid: string, $anim: HTMLElement, $mask?: HTMLElement): Promise<void>;
+    /**
+     * 显示
+     * @param popsType
+     * @param instConfigList
+     * @param guid
+     * @param config
+     * @param $anim
+     * @param $mask
+     */
+    show(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, popsType: PopsInstStoreType, instConfigList: PopsInstGeneralConfig[], guid: string, $anim: HTMLElement, $mask?: HTMLElement): Promise<void>;
+    /**
+     * 关闭
+     * @param popsType
+     * @param instConfigList
+     * @param guid
+     * @param config
+     * @param $anim
+     */
+    close(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, popsType: string, instConfigList: PopsInstGeneralConfig[], guid: string, $anim: HTMLElement): Promise<void>;
+    /**
+     * 拖拽元素
+     * 说明：
+     * + 元素的position为absolute或者fixed
+     * + 会为元素的
+     * @param $move 需要拖拽的元素
+     * @param options 配置
+     */
+    drag($move: HTMLElement, options: {
+        dragElement: HTMLElement;
+        limit: boolean;
+        emitClick?: boolean;
+        extraDistance: number;
+        container?: Window | typeof globalThis | HTMLElement;
+        startCallBack?: (moveElement: HTMLElement, left: number, top: number) => void;
+        moveCallBack?: (moveElement: HTMLElement, left: number, top: number) => void;
+        endCallBack?: (moveElement: HTMLElement, left: number, top: number) => void;
+        preventEvent?: (event: TouchEvent | PointerEvent) => boolean;
+    }): void;
+};

package/dist/types/src/types/EventEmitter.d.ts

@@ -0,0 +1,18 @@
+import type { PopsInstGeneralConfig } from "./inst";
+
+export type EventMap = {
+  "pops:before-show": (config: PopsInstGeneralConfig) => IPromise<void>;
+  "pops:show": (config: PopsInstGeneralConfig) => IPromise<void>;
+  "pops:before-hide": (config: PopsInstGeneralConfig) => IPromise<void>;
+  "pops:hide": (config: PopsInstGeneralConfig) => IPromise<void>;
+  "pops:before-destory": (config: PopsInstGeneralConfig) => IPromise<void>;
+  "pops:destory": () => IPromise<void>;
+  "pops:before-append-to-page": (
+    $shadowRoot: ShadowRoot | HTMLElement,
+    $shadowContainer: HTMLDivElement
+  ) => IPromise<void>;
+};
+
+export type CustomEventMap = {
+  [K in string]: (...args: any[]) => IPromise<void>;
+};

package/dist/types/src/types/PopsDOMUtilsEventType.d.ts

@@ -34,6 +34,10 @@ export type PopsDOMUtils_MouseEventType = keyof PopsDOMUtils_MouseEvent;
  */
 export interface PopsDOMUtils_KeyboardEvent {
   keydown: KeyboardEvent;
+  /**
+   * @link https://developer.mozilla.org/zh-CN/docs/Web/API/Element/keypress_event
+   * @deprecated
+   */
   keypress: KeyboardEvent;
   keyup: KeyboardEvent;
 }

package/dist/types/src/types/button.d.ts

@@ -1,3 +1,4 @@
+import type { EventEmiter } from "../event/EventEmiter";
 import type { PopsEventConfig, PopsHandlerEventConfig } from "./event";
 import type { PopsIconType } from "./icon";
 
@@ -63,7 +64,7 @@ export interface PopsGlobalButtonConfig<T = object> {
    *
    * 如果传入该值，那么将不会自动关闭弹窗
    */
-  callback(eventConfig: PopsHandlerEventConfig & T, event: PointerEvent | MouseEvent): void;
+  callback(eventConfig: PopsHandlerEventConfig<EventEmiter> & T, event: PointerEvent | MouseEvent): void;
 }
 
 /**

package/dist/types/src/types/event.d.ts

@@ -1,9 +1,11 @@
+import type { EventEmiter } from "../event/EventEmiter";
+import type { CustomEventMap } from "./EventEmitter";
 import type { PopsType } from "./main";
 
 /**
  * 事件配置
  */
-export interface PopsEventConfig {
+export interface PopsEventConfig<E extends EventEmiter<CustomEventMap> = EventEmiter<CustomEventMap>> {
   /** 最外层包裹的元素 */
   $shadowContainer: HTMLDivElement;
   /** ShadowRoot */
@@ -20,6 +22,8 @@ export interface PopsEventConfig {
   mode: PopsType;
   /** 唯一id */
   guid: string;
+  /** 事件发送器 */
+  emitter: E;
   /**
    * 关闭弹窗
    */
@@ -37,7 +41,7 @@ export interface PopsEventConfig {
 /**
  * 处理过的事件配置
  */
-export interface PopsHandlerEventConfig extends PopsEventConfig {
+export interface PopsHandlerEventConfig<E extends EventEmiter<CustomEventMap>> extends PopsEventConfig<E> {
   /** 当前按钮类型 */
   type: "cancel" | "close" | "ok" | "other";
 }

package/dist/types/src/types/inst.d.ts

@@ -1,3 +1,5 @@
+import type { EventEmiter } from "../event/EventEmiter";
+
 /**
  * config实例配置
  */
@@ -19,10 +21,8 @@ export interface PopsInstGeneralConfig extends PopsInstConfig {
   $shadowContainer: HTMLDivElement;
   /** shadow容器的shandowRoot */
   $shadowRoot: ShadowRoot | HTMLElement;
-  /** 移除实例前的回调函数 */
-  beforeRemoveCallBack?: (instCommonConfig: PopsInstGeneralConfig) => void;
   /** 配置 */
   config: any;
-  /** 销毁元素 */
-  destory(): void | Promise<void>;
+  /** 事件发送器 */
+  emitter: EventEmiter;
 }

package/dist/types/src/utils/PopsDOMUtils.d.ts

@@ -289,22 +289,6 @@ declare class PopsDOMUtilsEvent {
      * })
      */
     onKeydown(target: HTMLElement | Window | typeof globalThis | string, handler: (event: PopsDOMUtils_Event["keydown"]) => void, option?: boolean | AddEventListenerOptions): PopsDOMUtilsAddEventListenerResult | undefined;
-    /**
-     * 当按键按下时触发事件
-     * keydown - > keypress - > keyup
-     * @param target 目标
-     * @param handler 事件处理函数
-     * @param option 配置
-     * @example
-     * // 监听a.xx元素的按键按下
-     * DOMUtils.keypress(document.querySelector("a.xx"),()=>{
-     *   console.log("按键按下");
-     * })
-     * DOMUtils.keypress("a.xx",()=>{
-     *   console.log("按键按下");
-     * })
-     */
-    onKeypress(target: HTMLElement | Window | typeof globalThis | string, handler: (event: PopsDOMUtils_Event["keypress"]) => void, option?: boolean | AddEventListenerOptions): PopsDOMUtilsAddEventListenerResult | undefined;
     /**
      * 阻止事件传递
      *

package/dist/types/src/utils/PopsInstanceUtils.d.ts

@@ -1,30 +1,4 @@
-import type { PopsAlertConfig } from "../components/alert/types";
-import type { PopsConfirmConfig } from "../components/confirm/types";
-import type { PopsDrawerConfig } from "../components/drawer/types";
-import type { PopsFolderConfig } from "../components/folder/types";
-import type { PopsIframeConfig } from "../components/iframe/types";
-import type { PopsLoadingConfig } from "../components/loading/types";
-import type { PopsPanelConfig } from "../components/panel/types";
-import type { PopsPromptConfig } from "../components/prompt/types/index";
-import type { PopsInstGeneralConfig } from "../types/inst";
-import type { PopsInstStoreType } from "../types/main";
 export declare const PopsInstanceUtils: {
-    /**
-     * 获取页面中最大的z-index的元素信息
-     * @param deviation 获取最大的z-index值的偏移，默认是+1
-     * @param node 进行判断的元素，默认是document
-     * @param ignoreCallBack 执行元素处理时调用的函数，返回false可忽略不想要处理的元素
-     * @example
-     * Utils.getMaxZIndexNodeInfo();
-     * > {
-     *   node: ...,
-     *   zIndex: 1001
-     * }
-     **/
-    getMaxZIndexNodeInfo(deviation?: number, target?: Element | ShadowRoot | Document, ignoreCallBack?: ($ele: Element | HTMLElement | ShadowRoot) => boolean | void): {
-        node: Element;
-        zIndex: number;
-    };
     /**
      * 获取pops所有弹窗中的最大的z-index
      * @param deviation
@@ -34,68 +8,6 @@ export declare const PopsInstanceUtils: {
         animElement: HTMLDivElement | null;
         isOverMaxZIndex: boolean;
     };
-    /**
-     * 获取页面中最大的z-index
-     * @param deviation 获取最大的z-index值的偏移，默认是+1
-     * @example
-     * getMaxZIndex();
-     * > 1001
-     **/
-    getMaxZIndex(deviation?: number): number;
-    /**
-     * 删除配置中对应的对象
-     * @param totalInstConfigList 配置实例列表
-     * @param  guid 唯一标识
-     * @param isAll 是否全部删除
-     */
-    removeInstance(totalInstConfigList: PopsInstGeneralConfig[][], guid?: string, isAll?: boolean): Promise<PopsInstGeneralConfig[][]>;
-    /**
-     * 隐藏
-     * @param popsType
-     * @param instConfigList
-     * @param guid
-     * @param config
-     * @param $anim
-     * @param $mask
-     */
-    hide(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, popsType: PopsInstStoreType, instConfigList: PopsInstGeneralConfig[], guid: string, $anim: HTMLElement, $mask?: HTMLElement): Promise<void>;
-    /**
-     * 显示
-     * @param popsType
-     * @param instConfigList
-     * @param guid
-     * @param config
-     * @param $anim
-     * @param $mask
-     */
-    show(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, popsType: PopsInstStoreType, instConfigList: PopsInstGeneralConfig[], guid: string, $anim: HTMLElement, $mask?: HTMLElement): Promise<void>;
-    /**
-     * 关闭
-     * @param popsType
-     * @param instConfigList
-     * @param guid
-     * @param config
-     * @param $anim
-     */
-    close(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, popsType: string, instConfigList: PopsInstGeneralConfig[], guid: string, $anim: HTMLElement): Promise<void>;
-    /**
-     * 拖拽元素
-     * 说明：
-     * + 元素的position为absolute或者fixed
-     * + 会为元素的
-     * @param $move 需要拖拽的元素
-     * @param options 配置
-     */
-    drag($move: HTMLElement, options: {
-        dragElement: HTMLElement;
-        limit: boolean;
-        emitClick?: boolean;
-        extraDistance: number;
-        container?: Window | typeof globalThis | HTMLElement;
-        moveCallBack?: (moveElement: HTMLElement, left: number, top: number) => void;
-        endCallBack?: (moveElement: HTMLElement, left: number, top: number) => void;
-        preventEvent?: (event: TouchEvent | PointerEvent) => boolean;
-    }): void;
     /**
      * 排序数组
      * @param getBeforeValueFun

package/dist/types/src/utils/PopsUtils.d.ts

@@ -1,6 +1,10 @@
 import AnyTouch from "any-touch";
 import doubletap from "@any-touch/doubletap";
 declare class PopsUtils {
+    /**
+     * 超时时间
+     */
+    sleep(timeout: number): Promise<unknown>;
     /**
      * 判断是否是window，例如window、self、globalThis
      * @param target
@@ -151,6 +155,59 @@ declare class PopsUtils {
      * 覆盖对象中的数组新值
      */
     setArray<T>(target: T, key: keyof T, newArr: any[]): void;
+    /**
+     * 获取页面的坐标中最大的z-index的元素信息
+     *
+     * 其中坐标为
+     *
+     * + 左上角（宽: 1/8，高: 1/8）
+     * + 右上角（宽: 7/8，高: 1/8）
+     * + 左下角（宽: 1/8，高: 7/8）
+     * + 右下角（宽: 7/8，高: 7/8）
+     * + 中间（宽: 1/2，高: 1/2）
+     * @param $el 仅检测目标元素最大的z-index（自动往上层找）
+     * @param deviation 将对所有获取到的z-index处理偏移量（增加或减少），默认为10
+     */
+    getMaxZIndexNodeInfoFromPoint($el?: IFunction<HTMLElement | HTMLElement[]>, deviation?: number): {
+        /** 处理了偏移量后的z-index值 */
+        zIndex: number;
+        /** 原始z-index值 */
+        originZIndex: number;
+        /** 拥有最大z-index的元素 */
+        node: HTMLElement | null;
+        /** 目标坐标元素 */
+        positionNode: HTMLElement;
+        /** x坐标 */
+        positionX: number;
+        /** y坐标 */
+        positionY: number;
+    }[];
+    /**
+     * 获取页面的坐标中最大的z-index的元素信息
+     *
+     * 其中坐标为
+     *
+     * + 左上角（宽: 1/8，高: 1/8）
+     * + 右上角（宽: 7/8，高: 1/8）
+     * + 左下角（宽: 1/8，高: 7/8）
+     * + 右下角（宽: 7/8，高: 7/8）
+     * + 中间（宽: 1/2，高: 1/2）
+     * @param deviation 将对所有获取到的z-index处理偏移量（增加或减少）
+     */
+    getMaxZIndexNodeInfoFromPoint(deviation: IFunction<number>): {
+        /** 处理了偏移量后的z-index值 */
+        zIndex: number;
+        /** 原始z-index值 */
+        originZIndex: number;
+        /** 拥有最大z-index的元素 */
+        node: HTMLElement | null;
+        /** 目标坐标元素 */
+        positionNode: HTMLElement;
+        /** x坐标 */
+        positionX: number;
+        /** y坐标 */
+        positionY: number;
+    }[];
 }
 declare const popsUtils: PopsUtils;
 export { popsUtils };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "3.3.5",
+  "version": "4.0.0",
   "description": "弹窗库，包含了alert、confirm、prompt、drawer、folder、loading、iframe、panel、tooltip、searchSuggestion、rightClickMenu组件",
   "keywords": [
     "ScriptCat",
@@ -57,8 +57,8 @@
     "eslint-plugin-compat": "^6.0.2",
     "eslint-plugin-prettier": "^5.5.4",
     "globals": "^16.5.0",
-    "oxfmt": "^0.35.0",
-    "oxlint": "1.50.0",
+    "oxfmt": "^0.36.0",
+    "oxlint": "1.51.0",
     "rollup": "^4.54.0",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-import-css": "^4.1.2",

package/src/Pops.ts

@@ -1,3 +1,4 @@
+import { version } from "../package.json";
 import { PopsAlert } from "./components/alert";
 import type { PopsAlertConfig } from "./components/alert/types";
 import { PopsConfirm } from "./components/confirm";
@@ -22,6 +23,7 @@ import type { PopsSearchSuggestionConfig } from "./components/searchSuggestion/t
 import { PopsTooltip } from "./components/tooltip";
 import type { PopsToolTipConfig } from "./components/tooltip/types/index";
 import { GlobalConfig } from "./config/GlobalConfig";
+import { EventEmiter } from "./event/EventEmiter";
 import { PopsAnimation } from "./PopsAnimation";
 import { PopsCore } from "./PopsCore";
 import { PopsCSS } from "./PopsCSS";
@@ -31,7 +33,6 @@ import { popsDOMUtils } from "./utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "./utils/PopsInstanceUtils";
 import { PopsMathFloatUtils } from "./utils/PopsMathUtils";
 import { popsUtils } from "./utils/PopsUtils";
-import { version } from "../package.json";
 
 class Pops {
   /** 配置 */
@@ -60,7 +61,11 @@ class Pops {
     /** pops处理float类型使用的工具类 */
     MathFloatUtils: PopsMathFloatUtils,
     /** pops.panel中用于处理各个类型的工具 */
-    PanelHandlerComponents: PanelHandlerComponents,
+    PanelHandlerComponents,
+    /** pops.panel中的动画 */
+    PopsAnimation,
+    /** 事件类 */
+    EventEmiter,
   };
   init() {}
   /**

package/src/PopsAnimation.ts

@@ -29,4 +29,130 @@ export const PopsAnimation = {
   hasAnim(name: string) {
     return Object.prototype.hasOwnProperty.call(this.$data, name);
   },
+  /**
+   * 带动画的进入元素
+   * @param $el 当前元素
+   * @param $next 切换的元素
+   * @param option 配置
+   */
+  createSwitchElementWithAnimation(
+    $el: HTMLElement,
+    $next: HTMLElement,
+    option: {
+      /**
+       * 是否使用动画
+       * @default true
+       */
+      useAnimation?: boolean;
+      /**
+       * 动画配置
+       *
+       * + `duration`: 默认`220`
+       * + `easing`: 默认`"ease-in-out"`
+       */
+      animOptions?: KeyframeAnimationOptions;
+      /** 为$next内部添加元素 */
+      enterToAddElementCallback: () => IPromise<void>;
+      /** 退出时移除$next元素 */
+      exitToRemoveElementCallback?: () => IPromise<void>;
+    }
+  ) {
+    const animOptions: KeyframeAnimationOptions = {
+      // 150 220 300
+      duration: 220,
+      easing: "ease-in-out",
+      ...(option.animOptions ?? {}),
+    };
+    if (option.useAnimation == null) {
+      option.useAnimation = true;
+    }
+    return {
+      /**
+       * 进入
+       */
+      async enter() {
+        const transitionEndCallback = async () => {
+          // 先直接隐藏旧的容器
+          popsDOMUtils.cssHide($el, true);
+          // 添加元素
+          await option.enterToAddElementCallback();
+        };
+        // 进入下一层
+        if (option.useAnimation && typeof document.startViewTransition == "function") {
+          // 处理添加的元素的动画
+          const transition = document.startViewTransition(transitionEndCallback);
+          await transition.ready;
+          await $next.animate(
+            // 从右向左移入（进入动画）
+            [
+              {
+                // from
+                transform: "translateX(100%)",
+              },
+              {
+                // to
+                transform: "translateX(0)",
+              },
+            ],
+            animOptions
+          ).finished;
+          await transition.finished;
+        } else {
+          await transitionEndCallback();
+        }
+      },
+      /**
+       * 退出
+       */
+      async exit() {
+        // 返回上一层菜单
+        const transitionEndCallback = async () => {
+          // 显示上层菜单
+          popsDOMUtils.cssShow($el);
+          // 移除下一层的菜单
+          $next.remove();
+          if (typeof option.exitToRemoveElementCallback === "function") {
+            await option.exitToRemoveElementCallback();
+          }
+        };
+        if (option.useAnimation && typeof document.startViewTransition == "function") {
+          const leaveTransition = document.startViewTransition(transitionEndCallback);
+          await leaveTransition.ready;
+          await Promise.all([
+            // 从原位置向右移出
+            $next.animate(
+              [
+                {
+                  // from
+                  transform: "translateX(0)",
+                },
+                {
+                  // to
+                  transform: "translateX(100%)",
+                },
+              ],
+              animOptions
+            ).finished,
+            // 从最左边向右移入
+            $el.animate(
+              [
+                {
+                  // from
+                  transform: "translateX(-100%)",
+                },
+                {
+                  // to
+                  transform: "translateX(0)",
+                },
+              ],
+              animOptions
+            ).finished,
+          ]);
+          await leaveTransition.finished;
+        } else {
+          await transitionEndCallback();
+        }
+      },
+    };
+  },
 };

package/src/components/alert/index.ts

@@ -1,10 +1,12 @@
 import { GlobalConfig } from "../../config/GlobalConfig";
+import { EventEmiter } from "../../event/EventEmiter";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
+import { PopsInstHandler } from "../../handler/PopsInstHandler";
 import { PopsCSS } from "../../PopsCSS";
+import type { EventMap } from "../../types/EventEmitter";
 import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsAlertDefaultConfig } from "./defaultConfig";
 import type { PopsAlertConfig } from "./types";
@@ -14,6 +16,7 @@ export const PopsAlert = {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "alert";
+    const emitter = new EventEmiter<EventMap>(popsType);
 
     let config = PopsAlertDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -53,7 +56,7 @@ export const PopsAlert = {
     ]);
 
     // 先把z-index提取出来
-    const zIndex = PopsHandler.handleZIndex(config.zIndex);
+    const zIndex = PopsHandler.getTargerOrFunctionValue(config.zIndex);
     const maskHTML = PopsElementHandler.createMask(guid, zIndex);
     const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
     const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
@@ -116,6 +119,7 @@ export const PopsAlert = {
       popsType,
       $anim,
       $pops,
+      emitter,
       $mask
     );
     const result = PopsHandler.handleResultConfig(evtConfig);
@@ -125,12 +129,8 @@ export const PopsAlert = {
     PopsHandler.handleClickEvent("ok", btnOkElement, evtConfig, config.btn.ok?.callback);
 
     // 创建到页面中
-
     popsDOMUtils.append($shadowRoot, $elList);
-    if (typeof config.beforeAppendToPageCallBack === "function") {
-      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-    }
-
+    emitter.emit("pops:before-append-to-page", $shadowRoot, $shadowContainer);
     popsDOMUtils.appendBody($shadowContainer);
     if ($mask != null) {
       // 添加遮罩层
@@ -145,11 +145,11 @@ export const PopsAlert = {
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
       config: config,
-      destory: result.close,
+      emitter,
     });
     // 拖拽
     if (config.drag) {
-      PopsInstanceUtils.drag($pops!, {
+      PopsInstHandler.drag($pops!, {
         dragElement: $title!,
         limit: config.dragLimit,
         extraDistance: config.dragExtraDistance!,

package/src/components/confirm/index.ts

@@ -1,10 +1,12 @@
 import { GlobalConfig } from "../../config/GlobalConfig";
+import { EventEmiter } from "../../event/EventEmiter";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
+import { PopsInstHandler } from "../../handler/PopsInstHandler";
 import { PopsCSS } from "../../PopsCSS";
+import type { EventMap } from "../../types/EventEmitter";
 import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsConfirmDefaultConfig } from "./defaultConfig";
 import type { PopsConfirmConfig } from "./types";
@@ -14,6 +16,7 @@ export const PopsConfirm = {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "confirm";
+    const emitter = new EventEmiter<EventMap>(popsType);
 
     let config = PopsConfirmDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -53,7 +56,7 @@ export const PopsConfirm = {
     ]);
 
     // 先把z-index提取出来
-    const zIndex = PopsHandler.handleZIndex(config.zIndex);
+    const zIndex = PopsHandler.getTargerOrFunctionValue(config.zIndex);
     const maskHTML = PopsElementHandler.createMask(guid, zIndex);
 
     const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
@@ -121,6 +124,7 @@ export const PopsConfirm = {
       popsType,
       $anim,
       $pops,
+      emitter,
       $mask
     );
     const result = PopsHandler.handleResultConfig(evtConfig);
@@ -130,12 +134,8 @@ export const PopsConfirm = {
     PopsHandler.handleClickEvent("other", $btnOther, evtConfig, config.btn.other.callback);
 
     // 创建到页面中
-
     popsDOMUtils.append($shadowRoot, $elList);
-    if (typeof config.beforeAppendToPageCallBack === "function") {
-      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-    }
-
+    emitter.emit("pops:before-append-to-page", $shadowRoot, $shadowContainer);
     popsDOMUtils.appendBody($shadowContainer);
     if ($mask != null) {
       $anim.after($mask);
@@ -148,11 +148,11 @@ export const PopsConfirm = {
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
       config: config,
-      destory: result.close,
+      emitter,
     });
     // 拖拽
     if (config.drag) {
-      PopsInstanceUtils.drag($pops!, {
+      PopsInstHandler.drag($pops!, {
         dragElement: $title!,
         limit: config.dragLimit,
         extraDistance: config.dragExtraDistance,