@whitesev/pops 2.5.4 → 2.6.0

package/dist/types/src/components/rightClickMenu/types/index.d.ts

@@ -30,7 +30,7 @@ export interface PopsRightClickMenuDataDetails {
      * + false 不关闭菜单
      *
      */
-    callback?: (clickEvent: PointerEvent, contextMenuEvent: PointerEvent, liElement: HTMLLIElement, menuListenerRootNode: HTMLElement) => boolean | void | Promise<boolean | void>;
+    callback?: (clickEvent: PointerEvent, contextMenuEvent: PointerEvent, liElement: HTMLLIElement, menuListenerRootNode: NonNullable<PopsRightClickMenuDetails["target"]>) => boolean | void | Promise<boolean | void>;
     /**
      * 子项配置
      */
@@ -47,8 +47,14 @@ export interface PopsRightClickMenuDetails extends Pick<PopsCommonConfig, "useSh
     target?: HTMLElement | Window | EventTarget | Node;
     /**
      * 目标的子元素选择器，默认为空
+     * @default null
      */
     targetSelector?: string | null;
+    /**
+     * 位置
+     * @default "fixed"
+     */
+    position?: "absolute" | "fixed";
     /**
      * 右键菜单数据
      */
@@ -87,4 +93,14 @@ export interface PopsRightClickMenuDetails extends Pick<PopsCommonConfig, "useSh
      * @default false
      */
     preventDefault?: boolean;
+    /**
+     * 限制x位置在当前视窗内
+     * @default true
+     */
+    limitPositionXInView?: boolean;
+    /**
+     * 限制y位置在当前视窗内
+     * @default true
+     */
+    limitPositionYInView?: boolean;
 }

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

@@ -7,7 +7,7 @@ import type { PopsLoadingDetails } from "../components/loading/types";
 import type { PopsPanelDetails } from "../components/panel/types";
 import type { PopsPromptDetails } from "../components/prompt/types/index";
 import type { PopsCommonConfig } from "../types/components";
-import type { PopsEventDetails, PopsHandlerEventDetails } from "../types/event";
+import type { PopsEventConfig, PopsHandlerEventConfig } from "../types/event";
 import type { PopsInstCommonConfig } from "../types/inst";
 import type { PopsInstStoreType, PopsType, PopsSupportAnimDetailsType, PopsSupportOnlyDetails } from "../types/main";
 export declare const PopsHandler: {
@@ -34,9 +34,9 @@ export declare const PopsHandler: {
      * 处理遮罩层
      *
      * + 设置遮罩层的点击事件
-     * @param details 传递的配置
+     * @param config 传递的配置
      */
-    handleMask(details?: {
+    handleMask(config?: {
         type: "alert" | "confirm" | "prompt" | "loading" | "iframe" | "drawer" | "folder" | "panel";
         guid: string;
         config: Required<PopsAlertDetails> | Required<PopsLoadingDetails> | Required<PopsIframeDetails> | Required<PopsDrawerDetails> | Required<PopsPanelDetails> | Required<PopsFolderDetails>;
@@ -178,34 +178,35 @@ export declare const PopsHandler: {
      * @param $shadowContainer
      * @param $shadowRoot
      * @param mode 当前弹窗类型
-     * @param animElement 动画层
-     * @param popsElement 主元素
-     * @param maskElement 遮罩层
+     * @param $anim 动画层
+     * @param $pops 主元素
+     * @param $mask 遮罩层
      * @param config 当前配置
      */
-    handleEventDetails(guid: string, $shadowContainer: HTMLDivElement, $shadowRoot: ShadowRoot | HTMLElement, mode: PopsInstStoreType, animElement: HTMLDivElement, popsElement: HTMLDivElement, maskElement: HTMLDivElement, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails): PopsEventDetails;
+    handleEventConfig(config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, guid: string, $shadowContainer: HTMLDivElement, $shadowRoot: ShadowRoot | HTMLElement, mode: PopsInstStoreType, $anim: HTMLDivElement, $pops: HTMLDivElement, $mask?: HTMLDivElement): PopsEventConfig;
     /**
      * 获取loading的事件配置
      * @param guid
      * @param mode 当前弹窗类型
-     * @param animElement 动画层
-     * @param popsElement 主元素
-     * @param maskElement 遮罩层
+     * @param $anim 动画层
+     * @param $pops 主元素
+     * @param $mask 遮罩层
      * @param config 当前配置
      */
-    handleLoadingEventDetails(guid: string, mode: "loading", animElement: HTMLDivElement, popsElement: HTMLDivElement, maskElement: HTMLDivElement, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails): Omit<PopsEventDetails, "$shadowContainer" | "$shadowRoot">;
+    handleLoadingEventConfig(config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, guid: string, mode: "loading", $anim: HTMLDivElement, $pops: HTMLDivElement, $mask?: HTMLDivElement): Omit<PopsEventConfig, "$shadowContainer" | "$shadowRoot">;
     /**
-     * 处理返回的配置，针对popsHandler.handleEventDetails
+     * 处理返回的配置，针对popsHandler.handleEventConfig
+     * @param config 配置
      */
-    handleResultDetails<T>(details: T): Omit<T, "type" | "function">;
+    handleResultConfig<T>(config: T): Omit<T, "type" | "function">;
     /**
      * 处理点击事件
      * @param type 当前按钮类型
      * @param $btn 按钮元素
-     * @param eventDetails 事件配置，由popsHandler.handleEventDetails创建的
+     * @param eventConfig 事件配置，由popsHandler.handleEventConfig创建的
      * @param callback 点击回调
      */
-    handleClickEvent(type: "cancel" | "close" | "ok" | "other", $btn: HTMLElement, eventDetails: PopsEventDetails, callback: (details: PopsHandlerEventDetails, event: PointerEvent | MouseEvent) => void): void;
+    handleClickEvent(type: PopsHandlerEventConfig["type"], $btn: HTMLElement, eventConfig: PopsEventConfig, callback?: (details: PopsHandlerEventConfig, event: PointerEvent | MouseEvent) => void): void;
     /**
      * 全局监听键盘事件
      * @param keyName 键名|键值
@@ -220,10 +221,10 @@ export declare const PopsHandler: {
      * @param type 触发事件类型
      * @param inputElement 输入框
      * @param  $btn 按钮元素
-     * @param eventDetails 事件配置，由popsHandler.handleEventDetails创建的
+     * @param eventConfig 事件配置，由popsHandler.handleEventConfig创建的
      * @param callback 点击回调
      */
-    handlePromptClickEvent(type: "ok" | "close" | "cancel" | "other", inputElement: HTMLInputElement | HTMLTextAreaElement, $btn: HTMLElement, eventDetails: PopsEventDetails, callback: (details: PopsEventDetails & {
+    handlePromptClickEvent(type: PopsHandlerEventConfig["type"], inputElement: HTMLInputElement | HTMLTextAreaElement, $btn: HTMLElement, eventConfig: PopsEventConfig, callback: (details: PopsEventConfig & {
         type: any;
         text: string;
     }, event: MouseEvent | PointerEvent) => void): void;

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

@@ -1,4 +1,4 @@
-import type { PopsEventDetails, PopsHandlerEventDetails } from "./event";
+import type { PopsEventConfig, PopsHandlerEventConfig } from "./event";
 import type { PopsIconType } from "./icon";
 import type { PopsType } from "./main";
 
@@ -110,7 +110,7 @@ export interface PopsButtonDetails<T = object> {
    *
    * 如果传入该值，那么将不会自动关闭弹窗
    */
-  callback(eventDetails: PopsHandlerEventDetails & T, event: PointerEvent | MouseEvent): void;
+  callback(eventConfig: PopsHandlerEventConfig & T, event: PointerEvent | MouseEvent): void;
 }
 
 /**
@@ -127,7 +127,7 @@ export type PopsButtonDetailsAnyType<T = object> = Omit<PopsButtonDetails<T>, "t
 /** prompt的点击回调 */
 export interface PopsPromptButtonDetails extends PopsButtonDetails {
   callback(
-    eventDetails: PopsHandlerEventDetails & {
+    eventConfig: PopsHandlerEventConfig & {
       text: string;
     },
     event: PointerEvent | MouseEvent
@@ -183,5 +183,5 @@ export interface PopsHeaderCloseButtonDetails {
    *
    * 如果传入该值，那么将不会自动关闭弹窗
    */
-  callback?: (details: PopsEventDetails, event: PointerEvent | MouseEvent) => void;
+  callback?: (details: PopsEventConfig, event: PointerEvent | MouseEvent) => void;
 }

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

@@ -4,7 +4,7 @@ import type { PopsType } from "./main";
 /**
  * 事件配置
  */
-export interface PopsIframeEventDetails {
+export interface PopsIframeEventConfig {
   /**
    * 唯一id
    */
@@ -33,19 +33,19 @@ export interface PopsIframeEventDetails {
 /**
  * 事件配置
  */
-export interface PopsEventDetails {
+export interface PopsEventConfig {
   /** 最外层包裹的元素 */
   $shadowContainer: HTMLDivElement;
   /** ShadowRoot */
   $shadowRoot: ShadowRoot | HTMLElement;
   /** -> 动画层 */
-  element: HTMLDivElement;
+  $el: HTMLDivElement;
   /** 动画层 */
-  animElement: HTMLDivElement;
+  $anim: HTMLDivElement;
   /** 主元素 */
-  popsElement: HTMLDivElement;
+  $pops: HTMLDivElement;
   /** 遮罩层 */
-  maskElement?: HTMLDivElement;
+  $mask?: HTMLDivElement;
   /** 当前弹窗类型 */
   mode: PopsType;
   guid: string;
@@ -57,7 +57,7 @@ export interface PopsEventDetails {
 /**
  * 处理过的事件配置
  */
-export interface PopsHandlerEventDetails extends PopsEventDetails {
+export interface PopsHandlerEventConfig extends PopsEventConfig {
   /** 当前按钮类型 */
   type: "cancel" | "close" | "ok" | "other";
 }

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

@@ -55,29 +55,29 @@ export declare const PopsInstanceUtils: {
      * @param instConfigList
      * @param guid
      * @param config
-     * @param animElement
-     * @param maskElement
+     * @param $anim
+     * @param $mask
      */
-    hide(popsType: PopsInstStoreType, instConfigList: PopsInstCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): Promise<void>;
+    hide(config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, popsType: PopsInstStoreType, instConfigList: PopsInstCommonConfig[], guid: string, $anim: HTMLElement, $mask?: HTMLElement): Promise<void>;
     /**
      * 显示
      * @param popsType
      * @param instConfigList
      * @param guid
      * @param config
-     * @param animElement
-     * @param maskElement
+     * @param $anim
+     * @param $mask
      */
-    show(popsType: PopsInstStoreType, instConfigList: PopsInstCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement?: HTMLElement): Promise<void>;
+    show(config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, popsType: PopsInstStoreType, instConfigList: PopsInstCommonConfig[], guid: string, $anim: HTMLElement, $mask?: HTMLElement): Promise<void>;
     /**
      * 关闭
      * @param popsType
      * @param instConfigList
      * @param guid
      * @param config
-     * @param animElement
+     * @param $anim
      */
-    close(popsType: string, instConfigList: PopsInstCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement): Promise<void>;
+    close(config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, popsType: string, instConfigList: PopsInstCommonConfig[], guid: string, $anim: HTMLElement): Promise<void>;
     /**
      * 拖拽元素
      * 说明：

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "2.5.4",
+  "version": "2.6.0",
   "description": "弹窗库",
   "type": "module",
   "homepage": "https://github.com/WhiteSevs/TamperMonkeyScript/tree/master/lib/pops#readme",
@@ -41,28 +41,28 @@
   "license": "MIT",
   "dependencies": {
     "any-touch": "^2.2.0",
-    "worker-timers": "^8.0.23"
+    "worker-timers": "^8.0.25"
   },
   "devDependencies": {
-    "@eslint/js": "^9.36.0",
-    "@rollup/plugin-commonjs": "^28.0.6",
+    "@eslint/js": "^9.38.0",
+    "@rollup/plugin-commonjs": "^28.0.8",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "12.1.4",
-    "browserslist": "^4.26.2",
-    "caniuse-lite": "^1.0.30001743",
-    "eslint": "^9.36.0",
+    "browserslist": "^4.26.3",
+    "caniuse-lite": "^1.0.30001751",
+    "eslint": "^9.38.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-compat": "^6.0.2",
     "eslint-plugin-prettier": "^5.5.4",
     "globals": "^16.4.0",
-    "rollup": "^4.45.0",
+    "rollup": "^4.52.5",
     "rollup-plugin-clear": "^2.0.7",
-    "rollup-plugin-import-css": "^4.0.1",
+    "rollup-plugin-import-css": "^4.0.2",
     "tslib": "^2.8.1",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.44.0"
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.2"
   },
   "scripts": {
     "lint": "eslint .",

package/src/components/alert/index.ts

@@ -89,42 +89,42 @@ export const PopsAlert = {
     } = PopsHandler.handleQueryElement($anim, popsType);
 
     /** 遮罩层元素 */
-    let $mask: HTMLDivElement | null = null;
+    let $mask: HTMLDivElement | undefined = void 0;
     /** 已创建的元素列表 */
-    const elementList: HTMLElement[] = [$anim];
+    const $elList: HTMLElement[] = [$anim];
 
     /* 遮罩层元素 */
 
     if (config.mask.enable) {
-      const _handleMask_ = PopsHandler.handleMask({
+      const handleMask = PopsHandler.handleMask({
         type: popsType,
         guid: guid,
         config: config,
         animElement: $anim,
         maskHTML: maskHTML,
       });
-      $mask = _handleMask_.maskElement;
-      elementList.push($mask);
+      $mask = handleMask.maskElement;
+      $elList.push($mask);
     }
     /* 处理返回的配置 */
-    const eventDetails = PopsHandler.handleEventDetails(
+    const evtConfig = PopsHandler.handleEventConfig(
+      config,
       guid,
       $shadowContainer,
       $shadowRoot,
       popsType,
       $anim,
-      $pops!,
-      $mask!,
-      config
+      $pops,
+      $mask
     );
     /* 为顶部右边的关闭按钮添加点击事件 */
-    PopsHandler.handleClickEvent("close", $headerCloseBtn!, eventDetails, config.btn.close!.callback!);
+    PopsHandler.handleClickEvent("close", $headerCloseBtn, evtConfig, config.btn.close?.callback);
     /* 为底部ok按钮添加点击事件 */
-    PopsHandler.handleClickEvent("ok", btnOkElement!, eventDetails!, config.btn.ok!.callback!);
+    PopsHandler.handleClickEvent("ok", btnOkElement, evtConfig, config.btn.ok?.callback);
 
     /* 创建到页面中 */
 
-    popsDOMUtils.append($shadowRoot, elementList);
+    popsDOMUtils.append($shadowRoot, $elList);
     if (typeof config.beforeAppendToPageCallBack === "function") {
       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
     }
@@ -157,7 +157,7 @@ export const PopsAlert = {
       });
     }
 
-    const result = PopsHandler.handleResultDetails(eventDetails);
+    const result = PopsHandler.handleResultConfig(evtConfig);
     return result;
   },
 };

package/src/components/confirm/index.ts

@@ -94,43 +94,42 @@ export const PopsConfirm = {
     /**
      * 遮罩层元素
      */
-    let $mask: HTMLDivElement | null = null;
+    let $mask: HTMLDivElement | undefined = void 0;
     /**
      * 已创建的元素列表
      */
-    const elementList: HTMLElement[] = [$anim];
+    const $elList: HTMLElement[] = [$anim];
 
     if (config.mask.enable) {
       // 启用遮罩层
-      const _handleMask_ = PopsHandler.handleMask({
+      const handleMask = PopsHandler.handleMask({
         type: popsType,
         guid: guid,
         config: config,
         animElement: $anim,
         maskHTML: maskHTML,
       });
-      $mask = _handleMask_.maskElement;
-      elementList.push($mask);
+      $mask = handleMask.maskElement;
+      $elList.push($mask);
     }
-    const eventDetails = PopsHandler.handleEventDetails(
+    const evtConfig = PopsHandler.handleEventConfig(
+      config,
       guid,
       $shadowContainer,
       $shadowRoot,
       popsType,
-
       $anim,
-      $pops!,
-      $mask!,
-      config
+      $pops,
+      $mask
     );
-    PopsHandler.handleClickEvent("close", $btnClose!, eventDetails, config.btn.close!.callback!);
-    PopsHandler.handleClickEvent("ok", $btnOk!, eventDetails!, config.btn.ok!.callback!);
-    PopsHandler.handleClickEvent("cancel", $btnCancel!, eventDetails, config.btn.cancel!.callback!);
-    PopsHandler.handleClickEvent("other", $btnOther!, eventDetails, config.btn.other!.callback!);
+    PopsHandler.handleClickEvent("close", $btnClose, evtConfig, config.btn.close.callback);
+    PopsHandler.handleClickEvent("ok", $btnOk, evtConfig, config.btn.ok.callback);
+    PopsHandler.handleClickEvent("cancel", $btnCancel, evtConfig, config.btn.cancel.callback);
+    PopsHandler.handleClickEvent("other", $btnOther, evtConfig, config.btn.other.callback);
 
     /* 创建到页面中 */
 
-    popsDOMUtils.append($shadowRoot, elementList);
+    popsDOMUtils.append($shadowRoot, $elList);
     if (typeof config.beforeAppendToPageCallBack === "function") {
       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
     }
@@ -160,7 +159,7 @@ export const PopsConfirm = {
         endCallBack: config.dragEndCallBack,
       });
     }
-    const result = PopsHandler.handleResultDetails(eventDetails);
+    const result = PopsHandler.handleResultConfig(evtConfig);
     return result;
   },
 };

package/src/components/drawer/index.ts

@@ -2,6 +2,7 @@ import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
+import type { PopsHandlerEventConfig } from "../../types/event";
 import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -99,32 +100,32 @@ export const PopsDrawer = {
     /**
      * 遮罩层元素
      */
-    let $mask: HTMLDivElement | null = null;
+    let $mask: HTMLDivElement | undefined = void 0;
     /**
      * 已创建的元素列表
      */
-    const elementList: HTMLElement[] = [$anim];
+    const $elList: HTMLElement[] = [$anim];
 
     if (config.mask.enable) {
-      const _handleMask_ = PopsHandler.handleMask({
+      const handleMask = PopsHandler.handleMask({
         type: popsType,
         guid: guid,
         config: config,
         animElement: $anim,
         maskHTML: maskHTML,
       });
-      $mask = _handleMask_.maskElement;
-      elementList.push($mask);
+      $mask = handleMask.maskElement;
+      $elList.push($mask);
     }
-    const eventDetails = PopsHandler.handleEventDetails(
+    const evtConfig = PopsHandler.handleEventConfig(
+      config,
       guid,
       $shadowContainer,
       $shadowRoot,
       popsType,
       $anim,
       $pops,
-      $mask!,
-      config
+      $mask
     );
     /* 处理方向 */
 
@@ -153,11 +154,14 @@ export const PopsDrawer = {
     /* 按下Esc键触发关闭 */
     if (config.closeOnPressEscape) {
       PopsHandler.handleKeyboardEvent("Escape", [], function () {
-        eventDetails.close();
+        evtConfig.close();
       });
     }
     /* 待处理的点击事件列表 */
-    const needHandleClickEventList = [
+    const needHandleClickEventList: {
+      type: PopsHandlerEventConfig["type"];
+      ele: HTMLElement;
+    }[] = [
       {
         type: "close",
         ele: $headerCloseBtn,
@@ -176,20 +180,16 @@ export const PopsDrawer = {
       },
     ];
     needHandleClickEventList.forEach((item) => {
-      PopsHandler.handleClickEvent(
-        item.type as "close" | "cancel" | "ok" | "other",
-        item.ele,
-        eventDetails,
-        (_eventDetails_) => {
-          if (typeof (config.btn as any)[item.type].callback === "function") {
-            (config.btn as any)[item.type].callback(_eventDetails_);
-          }
+      PopsHandler.handleClickEvent(item.type, item.ele, evtConfig, (details, event) => {
+        const callback = config.btn[item.type].callback;
+        if (typeof callback === "function") {
+          callback(details, event);
         }
-      );
+      });
     });
 
     /* 先隐藏，然后根据config.openDelay来显示 */
-    elementList.forEach((element) => {
+    $elList.forEach((element) => {
       element.style.setProperty("display", "none");
       if (["top"].includes(config.direction)) {
         $pops.style.setProperty("height", config.size.toString());
@@ -212,7 +212,7 @@ export const PopsDrawer = {
     });
     /* 创建到页面中 */
 
-    popsDOMUtils.append($shadowRoot, elementList);
+    popsDOMUtils.append($shadowRoot, $elList);
     if (typeof config.beforeAppendToPageCallBack === "function") {
       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
     }
@@ -236,7 +236,7 @@ export const PopsDrawer = {
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
     });
-    const result = PopsHandler.handleResultDetails(eventDetails);
+    const result = PopsHandler.handleResultConfig(evtConfig);
     return result;
   },
 };

package/src/components/folder/index.ts

@@ -252,41 +252,41 @@ export const PopsFolder = {
     /**
      * 遮罩层元素
      */
-    let $mask: HTMLDivElement | null = null;
+    let $mask: HTMLDivElement | undefined = void 0;
     /**
      * 已创建的元素列表
      */
-    const elementList: HTMLElement[] = [$anim];
+    const $elList: HTMLElement[] = [$anim];
 
     if (config.mask.enable) {
-      const _handleMask_ = PopsHandler.handleMask({
+      const handleMask = PopsHandler.handleMask({
         type: popsType,
         guid: guid,
         config: config,
         animElement: $anim,
         maskHTML: maskHTML,
       });
-      $mask = _handleMask_.maskElement;
-      elementList.push($mask);
+      $mask = handleMask.maskElement;
+      $elList.push($mask);
     }
     /* 事件 */
-    const eventDetails = PopsHandler.handleEventDetails(
+    const evtConfig = PopsHandler.handleEventConfig(
+      config,
       guid,
       $shadowContainer,
       $shadowRoot,
       popsType,
       $anim,
       $pops,
-      $mask!,
-      config
+      $mask
     );
-    PopsHandler.handleClickEvent("close", $btnCloseBtn, eventDetails, config.btn.close!.callback!);
-    PopsHandler.handleClickEvent("ok", btnOkElement, eventDetails, config.btn.ok!.callback!);
-    PopsHandler.handleClickEvent("cancel", btnCancelElement, eventDetails, config.btn.cancel!.callback!);
-    PopsHandler.handleClickEvent("other", btnOtherElement, eventDetails, config.btn.other!.callback!);
+    PopsHandler.handleClickEvent("close", $btnCloseBtn, evtConfig, config.btn.close.callback);
+    PopsHandler.handleClickEvent("ok", btnOkElement, evtConfig, config.btn.ok.callback);
+    PopsHandler.handleClickEvent("cancel", btnCancelElement, evtConfig, config.btn.cancel.callback);
+    PopsHandler.handleClickEvent("other", btnOtherElement, evtConfig, config.btn.other.callback);
     /* 创建到页面中 */
 
-    popsDOMUtils.append($shadowRoot, elementList);
+    popsDOMUtils.append($shadowRoot, $elList);
     if (typeof config.beforeAppendToPageCallBack === "function") {
       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
     }
@@ -923,7 +923,7 @@ export const PopsFolder = {
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
     });
-    const result = PopsHandler.handleResultDetails(eventDetails);
+    const result = PopsHandler.handleResultConfig(evtConfig);
     return result;
   },
 };