@whitesev/pops 3.3.4 → 4.0.0

package/src/components/panel/handlerComponents.ts

@@ -1,8 +1,9 @@
 import { PopsCommonCSSClassName } from "../../config/CommonCSSClassName";
+import type { EventEmiter } from "../../event/EventEmiter";
+import { PopsAnimation } from "../../PopsAnimation";
 import { PopsCSS } from "../../PopsCSS";
 import { PopsIcon } from "../../PopsIcon";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { PopsMathFloatUtils } from "../../utils/PopsMathUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -74,6 +75,7 @@ export const PanelHandlerComponents = () => {
       nodeStoreConfigKey: "data-view-config",
     },
     $config: {} as Required<PopsPanelConfig>,
+    emitter: null as any as EventEmiter<PopsPanelEventType>,
     /**
      * 初始化
      * @param data
@@ -91,12 +93,14 @@ export const PanelHandlerComponents = () => {
         $panelBottomLeftContainer: HTMLElement;
         $panelBottomRightContainer: HTMLElement;
       };
+      emitter: EventEmiter<PopsPanelEventType>;
     }) {
       const PopsType = "panel";
       this.$el = {
         ...data.$el,
       };
       this.$config = data.config;
+      this.emitter = data.emitter;
 
       this.asideULElement = this.$el.$panelLeftAside.querySelector<HTMLUListElement>(
         `ul.pops-${PopsType}-aside-top-container`
@@ -1022,7 +1026,8 @@ export const PanelHandlerComponents = () => {
             $target: this.$ele.button,
             content: getToolTipContent,
             zIndex: () => {
-              return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
+              // return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
+              return popsUtils.getMaxZIndexNodeInfoFromPoint(this.$ele.button)[0].zIndex;
             },
             isFixed: true,
             className: "github-tooltip",
@@ -3654,104 +3659,37 @@ export const PanelHandlerComponents = () => {
             className: "pops-panel-deepMenu-container-left-arrow-icon",
             innerHTML: PopsIcon.getIcon("arrowLeft")!,
           });
-          // 动画配置
-          const animOptions: KeyframeAnimationOptions = {
-            // 150 220 300
-            duration: 220,
-            easing: "ease-in-out",
-          };
-          // 进入动画
-          const enterViewTransition = () => {
-            // 隐藏旧的容器
-            popsDOMUtils.cssHide($currentSection, true);
-            popsDOMUtils.on(
-              $headerLeftArrow,
-              "click",
-              async (event) => {
-                popsDOMUtils.preventEvent(event);
-                // 返回动画
-                const leaveViewTransition = () => {
-                  const $prev = $currentSection;
-                  popsDOMUtils.cssShow($prev);
-                  $deepMenuSection.remove();
-                };
-                // 返回上一层菜单
-                if (that.$config.useDeepMenuSwtichAnimation && document.startViewTransition) {
-                  const leaveTransition = document.startViewTransition(leaveViewTransition);
-                  await leaveTransition.ready;
-                  // 向右移出
-                  await Promise.all([
-                    $deepMenuSection.animate(
-                      [
-                        {
-                          // from
-                          transform: "translateX(0)",
-                        },
-                        {
-                          // to
-                          transform: "translateX(100%)",
-                        },
-                      ],
-                      animOptions
-                    ).finished,
-                    // 向右移入
-                    $currentSection.animate(
-                      [
-                        {
-                          // from
-                          transform: "translateX(-100%)",
-                        },
-                        {
-                          // to
-                          transform: "translateX(0)",
-                        },
-                      ],
-                      animOptions
-                    ).finished,
-                  ]);
-                  await leaveTransition.finished;
-                } else {
-                  leaveViewTransition();
+          const switchAnim = PopsAnimation.createSwitchElementWithAnimation($currentSection, $deepMenuSection, {
+            useAnimation: that.$config.useDeepMenuSwtichAnimation,
+            enterToAddElementCallback: () => {
+              popsDOMUtils.on(
+                $headerLeftArrow,
+                "click",
+                async (event) => {
+                  popsDOMUtils.preventEvent(event);
+                  // 返回动画
+                  await switchAnim.exit();
+                  that.emitRenderRightContainer($currentSection);
+                },
+                {
+                  once: true,
                 }
-                that.emitRenderRightContainer($currentSection);
-              },
-              {
-                once: true,
-              }
-            );
-            popsDOMUtils.before($header.firstElementChild!, $headerLeftArrow);
-            $deepMenuHeaderUL.appendChild($header);
-            $deepMenuSection.appendChild($deepMenuHeaderUL);
-            $deepMenuSection.appendChild($deepMenuMain);
+              );
+              popsDOMUtils.before($header.firstElementChild!, $headerLeftArrow);
+              $deepMenuHeaderUL.appendChild($header);
+              $deepMenuSection.appendChild($deepMenuHeaderUL);
+              $deepMenuSection.appendChild($deepMenuMain);
 
-            if (viewConfig.views && Array.isArray(viewConfig.views)) {
-              for (let index = 0; index < viewConfig.views.length; index++) {
-                const formItemConfig = viewConfig.views[index];
-                this.initContainerItem($deepMenuMain, formItemConfig);
+              if (viewConfig.views && Array.isArray(viewConfig.views)) {
+                for (let index = 0; index < viewConfig.views.length; index++) {
+                  const formItemConfig = viewConfig.views[index];
+                  this.initContainerItem($deepMenuMain, formItemConfig);
+                }
               }
-            }
-            that.$el.$panelRightSectionWrapper.appendChild($deepMenuSection);
-          };
-          if (that.$config.useDeepMenuSwtichAnimation && document.startViewTransition) {
-            const transition = document.startViewTransition(enterViewTransition);
-            await transition.ready;
-            await $deepMenuSection.animate(
-              [
-                {
-                  // from
-                  transform: "translateX(100%)",
-                },
-                {
-                  // to
-                  transform: "translateX(0)",
-                },
-              ],
-              animOptions
-            ).finished;
-            await transition.finished;
-          } else {
-            enterViewTransition();
-          }
+              that.$el.$panelRightSectionWrapper.appendChild($deepMenuSection);
+            },
+          });
+          await switchAnim.enter();
           if (typeof viewConfig.afterEnterDeepMenuCallBack === "function") {
             viewConfig.afterEnterDeepMenuCallBack(viewConfig, {
               $sectionContainer: $deepMenuSection,
@@ -3916,20 +3854,12 @@ export const PanelHandlerComponents = () => {
      * @param $container 容器
      */
     emitRenderRightContainer($container: HTMLElement) {
-      const dataViewConfig: PopsPanelEventType["pops:renderRightContainer"]["viewConfig"] = Reflect.get(
-        $container,
-        this.$data.nodeStoreConfigKey
-      );
-      this.$el.$pops.dispatchEvent(
-        new CustomEvent<PopsPanelEventType["pops:renderRightContainer"]>(
-          <keyof PopsPanelEventType>"pops:renderRightContainer",
-          {
-            detail: {
-              viewConfig: dataViewConfig,
-            },
-          }
-        )
-      );
+      const dataViewConfig: Parameters<PopsPanelEventType["pops:renderRightContainer"]>["0"]["viewConfig"] =
+        Reflect.get($container, this.$data.nodeStoreConfigKey);
+
+      this.emitter.emit("pops:renderRightContainer", {
+        viewConfig: dataViewConfig,
+      });
     },
     /**
      *

package/src/components/panel/index.ts

@@ -1,20 +1,22 @@
+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 { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
-import type { PopsPanelConfig, PopsPanelEventType } from "./types";
 import { PopsPanelDefaultConfig } from "./defaultConfig";
 import { PanelHandlerComponents } from "./handlerComponents";
-import { GlobalConfig } from "../../config/GlobalConfig";
-import { PopsCSS } from "../../PopsCSS";
-import type { PopsType } from "../../types/main";
+import type { PopsPanelConfig, PopsPanelEventType } from "./types";
 
 export const PopsPanel = {
   init(__config__: PopsPanelConfig) {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "panel";
+    const emitter = new EventEmiter<PopsPanelEventType>(popsType);
 
     let config: Required<PopsPanelConfig> = PopsPanelDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -54,7 +56,7 @@ export const PopsPanel = {
     ]);
 
     // 先把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);
@@ -144,6 +146,7 @@ export const PopsPanel = {
       popsType,
       $anim,
       $pops,
+      emitter,
       $mask
     );
     const result = PopsHandler.handleResultConfig(evtConfig);
@@ -152,9 +155,7 @@ export const PopsPanel = {
 
     // 创建到页面中
     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) {
@@ -177,6 +178,7 @@ export const PopsPanel = {
         $panelBottomLeftContainer,
         $panelBottomRightContainer,
       },
+      emitter,
     });
 
     PopsHandler.handlePush(popsType, {
@@ -187,11 +189,11 @@ export const PopsPanel = {
       $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,
@@ -199,23 +201,27 @@ export const PopsPanel = {
         endCallBack: config.dragEndCallBack,
       });
     }
+    if (config.listenEscapeKeyUpToExitDeepMenu) {
+      const escapeListener = popsDOMUtils.onKeyup(
+        globalThis,
+        (evt) => {
+          if (evt.key === "Escape" && !evt.ctrlKey && !evt.shiftKey && !evt.altKey && !evt.metaKey) {
+            // Esc
+            const $exitBtn = $panelRightSectionWrapper.querySelector<HTMLLIElement>(
+              ".pops-panel-deepMenu-container-left-arrow-icon"
+            );
+            if ($exitBtn) {
+              $exitBtn.click();
+            }
+          }
+        },
+        { capture: true }
+      );
+      emitter.on("pops:before-destory", () => {
+        escapeListener?.off();
+      });
+    }
 
-    return {
-      ...result,
-      addEventListener: <K extends keyof PopsPanelEventType>(
-        event: K,
-        listener: (evt: CustomEvent<PopsPanelEventType[K]>) => void,
-        options?: boolean | EventListenerOptions
-      ) => {
-        $pops.addEventListener(event, listener as any, options);
-      },
-      removeEventListener: <K extends keyof PopsPanelEventType>(
-        event: K,
-        listener: (evt: CustomEvent<PopsPanelEventType[K]>) => void,
-        options?: boolean | EventListenerOptions
-      ) => {
-        $pops.removeEventListener(event, listener as any, options);
-      },
-    };
+    return result;
   },
 };

package/src/components/panel/types/index.ts

@@ -36,12 +36,12 @@ export type PopsPanelEventType = {
   /**
    * 该事件在右侧容器内的元素改变时触发
    */
-  "pops:renderRightContainer": {
+  "pops:renderRightContainer": (data: {
     /**
      * 视图配置
      */
     viewConfig: PopsPanelContentConfig[] | PopsPanelDeepViewConfig;
-  };
+  }) => void;
 };
 
 /**
@@ -241,4 +241,9 @@ export interface PopsPanelConfig extends PopsTitleConfig, PopsDragConfig, PopsGe
    * @default true
    */
   useDeepMenuSwtichAnimation?: true;
+  /**
+   * 监听按键按下Esc来退出内部菜单
+   * @default true
+   */
+  listenEscapeKeyUpToExitDeepMenu?: boolean;
 }

package/src/components/prompt/defaultConfig.ts

@@ -92,5 +92,6 @@ export const PopsPromptDefaultConfig = (): DeepRequired<PopsPromptConfig> => {
     lightStyle: null,
     darkStyle: null,
     beforeAppendToPageCallBack() {},
+    stopKeyDownEventPropagation: true,
   };
 };

package/src/components/prompt/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 { PopsPromptDefaultConfig } from "./defaultConfig";
 import type { PopsPromptConfig } from "./types/index";
@@ -14,6 +16,7 @@ export const PopsPrompt = {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "prompt";
+    const emitter = new EventEmiter<EventMap>(popsType);
 
     let config = PopsPromptDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -53,7 +56,7 @@ export const PopsPrompt = {
     ]);
 
     // 先把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);
@@ -131,6 +134,7 @@ export const PopsPrompt = {
       popsType,
       $anim,
       $pops,
+      emitter,
       $mask
     );
     const result = PopsHandler.handleResultConfig(evtConfig);
@@ -146,10 +150,7 @@ export const PopsPrompt = {
     // 创建到页面中
 
     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);
@@ -162,11 +163,11 @@ export const PopsPrompt = {
       $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/rightClickMenu/index.ts

@@ -1,6 +1,12 @@
+import { PopsCSS } from "../../PopsCSS";
 import { OriginPrototype } from "../../PopsCore";
+import { PopsIcon } from "../../PopsIcon";
 import { GlobalConfig } from "../../config/GlobalConfig";
+import { EventEmiter } from "../../event/EventEmiter";
+import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
+import type { EventMap } from "../../types/EventEmitter";
+import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -12,16 +18,13 @@ import type {
   PopsRightClickMenuItemStoreNodeValue,
   PopsRightClickMenuRootStoreNodeValue,
 } from "./types";
-import { PopsCSS } from "../../PopsCSS";
-import { PopsIcon } from "../../PopsIcon";
-import type { PopsType } from "../../types/main";
-import { PopsElementHandler } from "../../handler/PopsElementHandler";
 
 export const PopsRightClickMenu = {
   init(__config__: PopsRightClickMenuConfig) {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "rightClickMenu";
+    const emitter = new EventEmiter<EventMap>(popsType);
 
     let config = PopsRightClickMenuDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -154,13 +157,14 @@ export const PopsRightClickMenu = {
             guid: guid,
             $anim: rootElement,
             $pops: rootElement,
-            beforeRemoveCallBack(instCommonConfig) {
-              PopsContextMenu.closeAllMenu(instCommonConfig.$pops);
-            },
             config: config,
-            destory: () => {
-              PopsContextMenu.closeAllMenu(rootElement);
-            },
+            emitter,
+          });
+          emitter.on("pops:before-destory", () => {
+            PopsContextMenu.closeAllMenu(rootElement);
+          });
+          emitter.on("pops:destory", () => {
+            PopsContextMenu.closeAllMenu(rootElement);
           });
         }
       },
@@ -254,6 +258,7 @@ export const PopsRightClickMenu = {
         );
         const zIndex = this.getMenuZIndex();
         if (zIndex > 10000) {
+          // 大于默认值
           $menu.style.zIndex = zIndex.toString();
         }
         if (isChildren) {
@@ -274,7 +279,7 @@ export const PopsRightClickMenu = {
        * 动态获取配的z-index
        */
       getMenuZIndex() {
-        return PopsHandler.handleZIndex(config.zIndex);
+        return PopsHandler.getTargerOrFunctionValue(config.zIndex);
       },
       /**
        * 获取left、top偏移
@@ -395,9 +400,7 @@ export const PopsRightClickMenu = {
         popsDOMUtils.append($shadowRoot, menuElement);
         // 判断容器是否存在
         if (!document.contains($shadowContainer)) {
-          if (typeof config.beforeAppendToPageCallBack === "function") {
-            config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-          }
+          emitter.emit("pops:before-append-to-page", $shadowRoot, $shadowContainer);
           popsDOMUtils.appendBody($shadowContainer);
         }
         this.handlerShowMenuCSS(menuElement, menuEvent);

package/src/components/searchSuggestion/index.ts

@@ -1,8 +1,10 @@
 import { PopsCommonCSSClassName } from "../../config/CommonCSSClassName";
 import { GlobalConfig } from "../../config/GlobalConfig";
+import { EventEmiter } from "../../event/EventEmiter";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
+import type { EventMap } from "../../types/EventEmitter";
 import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
@@ -15,6 +17,7 @@ export const PopsSearchSuggestion = {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "searchSuggestion";
+    const emitter = new EventEmiter<EventMap>(popsType);
 
     let config = PopsSearchSuggestionDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -54,6 +57,7 @@ export const PopsSearchSuggestion = {
       passive: true,
     };
     const SearchSuggestion = {
+      emitter: emitter,
       /**
        * 当前的环境，可以是document，可以是shadowroot，默认是document
        */
@@ -282,7 +286,7 @@ export const PopsSearchSuggestion = {
 					border: initial;
 					overflow: initial;
 					position: ${config.isAbsolute ? "absolute" : "fixed"};
-					z-index: ${PopsHandler.handleZIndex(config.zIndex)};
+					z-index: ${PopsHandler.getTargerOrFunctionValue(config.zIndex)};
 				}
         .pops-${popsType}-search-suggestion-dropdown-wrapper{
 					max-height: ${config.maxHeight};

package/src/components/tooltip/index.ts

@@ -1,7 +1,9 @@
 import { GlobalConfig } from "../../config/GlobalConfig";
+import { EventEmiter } from "../../event/EventEmiter";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
+import type { EventMap } from "../../types/EventEmitter";
 import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
@@ -19,6 +21,7 @@ export class ToolTip {
     $content: null as unknown as HTMLElement,
     $arrow: null as unknown as HTMLElement,
   };
+  emitter: EventEmiter<EventMap>;
   $data = {
     config: null as any as Required<PopsToolTipConfig>,
     guid: null as any as string,
@@ -31,8 +34,10 @@ export class ToolTip {
     ShadowInfo: {
       $shadowContainer: HTMLDivElement;
       $shadowRoot: ShadowRoot | HTMLElement;
-    }
+    },
+    emitter: EventEmiter<EventMap>
   ) {
+    this.emitter = emitter;
     this.$data.config = config;
     this.$data.guid = guid;
     this.$el.$shadowContainer = ShadowInfo.$shadowContainer;
@@ -85,7 +90,7 @@ export class ToolTip {
     // 处理className
     popsDOMUtils.addClassName($toolTipContainer, this.$data.config.className);
     // 添加z-index
-    $toolTipContainer.style.zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex).toString();
+    $toolTipContainer.style.zIndex = PopsHandler.getTargerOrFunctionValue(this.$data.config.zIndex).toString();
     // 添加自定义style
     PopsElementHandler.addStyle($toolTipContainer, this.$data.config.style);
     // 添加自定义浅色style
@@ -133,7 +138,7 @@ export class ToolTip {
    * 获取z-index
    */
   getZIndex() {
-    const zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex);
+    const zIndex = PopsHandler.getTargerOrFunctionValue(this.$data.config.zIndex);
     return zIndex;
   }
   /**
@@ -328,9 +333,7 @@ export class ToolTip {
 
     if (!popsUtils.contains(this.$el.$shadowContainer)) {
       // 页面不存在Shadow，添加
-      if (typeof this.$data.config.beforeAppendToPageCallBack === "function") {
-        this.$data.config.beforeAppendToPageCallBack(this.$el.$shadowRoot, this.$el.$shadowContainer);
-      }
+      this.emitter.emit("pops:before-append-to-page", this.$el.$shadowRoot, this.$el.$shadowContainer);
       popsDOMUtils.append(document.body, this.$el.$shadowContainer);
     }
 
@@ -555,6 +558,7 @@ export const PopsTooltip = {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "tooltip";
+    const emitter = new EventEmiter<EventMap>(popsType);
 
     let config = PopsTooltipDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -593,10 +597,15 @@ export const PopsTooltip = {
       },
     ]);
 
-    const toolTip = new ToolTip(config, guid, {
-      $shadowContainer,
-      $shadowRoot,
-    });
+    const toolTip = new ToolTip(
+      config,
+      guid,
+      {
+        $shadowContainer,
+        $shadowRoot,
+      },
+      emitter
+    );
     if (config.alwaysShow) {
       // 总是显示
       // 直接显示
@@ -611,6 +620,7 @@ export const PopsTooltip = {
       $shadowContainer,
       $shadowRoot,
       toolTip,
+      emitter,
     };
   },
 };