@whitesev/pops 1.9.0 → 1.9.2

package/dist/index.esm.js

@@ -1743,10 +1743,9 @@ const PopsInstanceUtils = {
     getPopsMaxZIndex(deviation = 1) {
         deviation = Number.isNaN(deviation) ? 1 : deviation;
         // 最大值 2147483647
-        // 最大值 2147483647
-        // const maxZIndex = Math.pow(2, 31) - 1;
+        // const browserMaxZIndex = Math.pow(2, 31) - 1;
         // 比较值 2000000000
-        const maxZIndexCompare = 2 * Math.pow(10, 9);
+        const maxZIndex = 2 * Math.pow(10, 9);
         // 当前页面最大的z-index
         let zIndex = 0;
         // 当前的最大z-index的元素，调试使用
@@ -1776,17 +1775,18 @@ const PopsInstanceUtils = {
             }
         });
         zIndex += deviation;
-        if (zIndex >= maxZIndexCompare) {
-            // 最好不要超过最大值
-            zIndex = maxZIndexCompare;
+        let isOverMaxZIndex = zIndex >= maxZIndex;
+        if (isOverMaxZIndex) {
+            // 超出z-index最大值
+            zIndex = maxZIndex;
         }
-        return { zIndex: zIndex, animElement: maxZIndexNode };
+        return { zIndex: zIndex, animElement: maxZIndexNode, isOverMaxZIndex };
     },
     /**
      * 获取页面中最大的z-index
      * @param deviation 获取最大的z-index值的偏移，默认是+1
      * @example
-     * Utils.getMaxZIndex();
+     * getMaxZIndex();
      * > 1001
      **/
     getMaxZIndex(deviation = 1) {
@@ -2276,7 +2276,7 @@ const PopsInstanceUtils = {
     },
 };
 
-var indexCSS = "@charset \"utf-8\";\r\n* {\r\n\t-webkit-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\t-webkit-tap-highlight-color: transparent;\r\n\t/* 代替::-webkit-scrollbar */\r\n\tscrollbar-width: thin;\r\n}\r\n.pops {\r\n\t--pops-bg-opacity: 1;\r\n\t--pops-bd-opacity: 1;\r\n\t--pops-font-size: 16px;\r\n\tinterpolate-size: allow-keywords;\r\n}\r\n.pops-mask {\r\n\t--pops-mask-bg-opacity: 0.4;\r\n}\r\n.pops {\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tborder-radius: 4px;\r\n\tborder: 1px solid rgb(235, 238, 245, var(--pops-bd-opacity));\r\n\tfont-size: var(--pops-font-size);\r\n\tbox-shadow: 0 0 12px rgba(0, 0, 0, 0.12);\r\n\tbox-sizing: border-box;\r\n\toverflow: hidden;\r\n\ttransition: all 0.35s;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\n.pops-anim {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n.pops-anim[anim=\"\"] {\r\n\ttop: unset;\r\n\tright: unset;\r\n\tbottom: unset;\r\n\tleft: unset;\r\n\twidth: unset;\r\n\theight: unset;\r\n\ttransition: none;\r\n}\r\n/* 底部图标动画和样式 */\r\n.pops i.pops-bottom-icon[is-loading=\"true\"] {\r\n\tanimation: rotating 2s linear infinite;\r\n}\r\n.pops i.pops-bottom-icon {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n\tline-height: normal;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n\tcolor: inherit;\r\n\tfont-size: inherit;\r\n}\r\n\r\n/* 遮罩层样式 */\r\n.pops-mask {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tborder: 0;\r\n\tborder-radius: 0;\r\n\tbackground-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));\r\n\tbox-shadow: none;\r\n\ttransition: none;\r\n}\r\n\r\n.pops-header-controls button.pops-header-control[type][data-header] {\r\n\tfloat: right;\r\n\tmargin: 0 0;\r\n\toutline: 0;\r\n\tborder: 0;\r\n\tborder-color: rgb(136, 136, 136, var(--pops-bd-opacity));\r\n\tbackground-color: transparent;\r\n\tcolor: #888;\r\n\tcursor: pointer;\r\n}\r\n.pops-header-controls button.pops-header-control[type=\"max\"],\r\n.pops-header-controls button.pops-header-control[type=\"mise\"],\r\n.pops-header-controls button.pops-header-control[type=\"min\"] {\r\n\toutline: 0 !important;\r\n\tborder: 0;\r\n\tborder-color: rgb(136, 136, 136, var(--pops-bd-opacity));\r\n\tbackground-color: transparent;\r\n\tcolor: rgb(136, 136, 136);\r\n\tcursor: pointer;\r\n\ttransition: all 0.3s ease-in-out;\r\n}\r\nbutton.pops-header-control i {\r\n\tcolor: rgb(144, 147, 153);\r\n\tfont-size: inherit;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n}\r\nbutton.pops-header-control svg {\r\n\theight: 1.25em;\r\n\twidth: 1.25em;\r\n}\r\nbutton.pops-header-control {\r\n\tright: 15px;\r\n\tpadding: 0;\r\n\tborder: none;\r\n\toutline: 0;\r\n\tbackground: 0 0;\r\n\tcursor: pointer;\r\n\tposition: unset;\r\n\tline-height: normal;\r\n}\r\nbutton.pops-header-control i:hover {\r\n\tcolor: rgb(64, 158, 255);\r\n}\r\n.pops-header-controls[data-margin] button.pops-header-control {\r\n\tmargin: 0 6px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops[type-value] .pops-header-controls {\r\n\tdisplay: flex;\r\n\tgap: 6px;\r\n}\r\n\r\n/* 标题禁止选中文字 */\r\n.pops [class^=\"pops\"][class*=\"-title\"] p[pops] {\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n";
+var indexCSS = "@charset \"utf-8\";\r\n.pops * {\r\n\t-webkit-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\t-webkit-tap-highlight-color: transparent;\r\n\t/* 代替::-webkit-scrollbar */\r\n\tscrollbar-width: thin;\r\n}\r\n.pops {\r\n\t--pops-bg-opacity: 1;\r\n\t--pops-bd-opacity: 1;\r\n\t--pops-font-size: 16px;\r\n\tinterpolate-size: allow-keywords;\r\n}\r\n.pops-mask {\r\n\t--pops-mask-bg-opacity: 0.4;\r\n}\r\n.pops {\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tborder-radius: 4px;\r\n\tborder: 1px solid rgb(235, 238, 245, var(--pops-bd-opacity));\r\n\tfont-size: var(--pops-font-size);\r\n\tbox-shadow: 0 0 12px rgba(0, 0, 0, 0.12);\r\n\tbox-sizing: border-box;\r\n\toverflow: hidden;\r\n\ttransition: all 0.35s;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\n.pops-anim {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n.pops-anim[anim=\"\"] {\r\n\ttop: unset;\r\n\tright: unset;\r\n\tbottom: unset;\r\n\tleft: unset;\r\n\twidth: unset;\r\n\theight: unset;\r\n\ttransition: none;\r\n}\r\n/* 底部图标动画和样式 */\r\n.pops i.pops-bottom-icon[is-loading=\"true\"] {\r\n\tanimation: rotating 2s linear infinite;\r\n}\r\n.pops i.pops-bottom-icon {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n\tline-height: normal;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n\tcolor: inherit;\r\n\tfont-size: inherit;\r\n}\r\n\r\n/* 遮罩层样式 */\r\n.pops-mask {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tborder: 0;\r\n\tborder-radius: 0;\r\n\tbackground-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));\r\n\tbox-shadow: none;\r\n\ttransition: none;\r\n}\r\n\r\n.pops-header-controls button.pops-header-control[type][data-header] {\r\n\tfloat: right;\r\n\tmargin: 0 0;\r\n\toutline: 0;\r\n\tborder: 0;\r\n\tborder-color: rgb(136, 136, 136, var(--pops-bd-opacity));\r\n\tbackground-color: transparent;\r\n\tcolor: #888;\r\n\tcursor: pointer;\r\n}\r\n.pops-header-controls button.pops-header-control[type=\"max\"],\r\n.pops-header-controls button.pops-header-control[type=\"mise\"],\r\n.pops-header-controls button.pops-header-control[type=\"min\"] {\r\n\toutline: 0 !important;\r\n\tborder: 0;\r\n\tborder-color: rgb(136, 136, 136, var(--pops-bd-opacity));\r\n\tbackground-color: transparent;\r\n\tcolor: rgb(136, 136, 136);\r\n\tcursor: pointer;\r\n\ttransition: all 0.3s ease-in-out;\r\n}\r\nbutton.pops-header-control i {\r\n\tcolor: rgb(144, 147, 153);\r\n\tfont-size: inherit;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n}\r\nbutton.pops-header-control svg {\r\n\theight: 1.25em;\r\n\twidth: 1.25em;\r\n}\r\nbutton.pops-header-control {\r\n\tright: 15px;\r\n\tpadding: 0;\r\n\tborder: none;\r\n\toutline: 0;\r\n\tbackground: 0 0;\r\n\tcursor: pointer;\r\n\tposition: unset;\r\n\tline-height: normal;\r\n}\r\nbutton.pops-header-control i:hover {\r\n\tcolor: rgb(64, 158, 255);\r\n}\r\n.pops-header-controls[data-margin] button.pops-header-control {\r\n\tmargin: 0 6px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops[type-value] .pops-header-controls {\r\n\tdisplay: flex;\r\n\tgap: 6px;\r\n}\r\n\r\n/* 标题禁止选中文字 */\r\n.pops [class^=\"pops\"][class*=\"-title\"] p[pops] {\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n";
 
 var ninePalaceGridPositionCSS = ".pops[position=\"top_left\"] {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tleft: 0;\r\n}\r\n.pops[position=\"top\"] {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tleft: 50%;\r\n\ttransform: translateX(-50%);\r\n}\r\n.pops[position=\"top_right\"] {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: 0;\r\n}\r\n.pops[position=\"center_left\"] {\r\n\tposition: fixed;\r\n\ttop: 50%;\r\n\tleft: 0;\r\n\ttransform: translateY(-50%);\r\n}\r\n.pops[position=\"center\"] {\r\n\tposition: fixed;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\ttransform: translate(-50%, -50%);\r\n}\r\n.pops[position=\"center_right\"] {\r\n\tposition: fixed;\r\n\ttop: 50%;\r\n\tright: 0;\r\n\ttransform: translateY(-50%);\r\n}\r\n.pops[position=\"bottom_left\"] {\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n}\r\n.pops[position=\"bottom\"] {\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tleft: 50%;\r\n\ttransform: translate(-50%, 0);\r\n}\r\n.pops[position=\"bottom_right\"] {\r\n\tposition: fixed;\r\n\tright: 0;\r\n\tbottom: 0;\r\n}\r\n";
 
@@ -2469,7 +2469,7 @@ const PopsElementHandler = {
 		<div 
 			class="pops-anim"
 			anim="${__config.animation || ""}"
-			style="${popsAnimStyle};"
+			style="${popsAnimStyle}"
 			data-guid="${guid}">
             ${config.style != null
             ? `<style tyle="text/css">${config.style}</style>`
@@ -2740,14 +2740,22 @@ const PopsHandler = {
     /**
      * 创建shadow
      */
-    handlerShadow() {
+    handlerShadow(config) {
         let $shadowContainer = document.createElement("div");
         $shadowContainer.className = "pops-shadow-container";
-        let $shadowRoot = $shadowContainer.attachShadow({ mode: "open" });
-        return {
-            $shadowContainer,
-            $shadowRoot,
-        };
+        if (config.useShadowRoot) {
+            let $shadowRoot = $shadowContainer.attachShadow({ mode: "open" });
+            return {
+                $shadowContainer,
+                $shadowRoot,
+            };
+        }
+        else {
+            return {
+                $shadowContainer,
+                $shadowRoot: $shadowContainer,
+            };
+        }
     },
     /**
      * 处理初始化
@@ -3144,17 +3152,11 @@ const PopsHandler = {
         else {
             // 对配置进行处理
             // 选择配置的z-index和已有的pops实例的最大z-index值
-            if (typeof config.zIndex === "function") {
-                let originZIndexFn = config.zIndex;
-                config.zIndex = () => {
-                    const { zIndex: maxZIndex } = PopsInstanceUtils.getPopsMaxZIndex(PopsHandler.handleZIndex(originZIndexFn) + 100);
-                    return maxZIndex;
-                };
-            }
-            else {
-                const { zIndex: maxZIndex } = PopsInstanceUtils.getPopsMaxZIndex(PopsHandler.handleZIndex(config.zIndex) + 100);
-                config.zIndex = maxZIndex;
-            }
+            let originZIndex = config.zIndex;
+            config.zIndex = () => {
+                const { zIndex: maxZIndex } = PopsInstanceUtils.getPopsMaxZIndex(PopsHandler.handleZIndex(originZIndex) + 100);
+                return maxZIndex;
+            };
         }
         return config;
     },
@@ -3191,17 +3193,18 @@ const PopsAlertConfig = () => {
                 iconIsLoading: false,
                 text: "确定",
                 type: "primary",
-                callback: function (event) {
-                    event.close();
+                callback: function (details) {
+                    details.close();
                 },
             },
             close: {
                 enable: true,
-                callback: function (event) {
-                    event.close();
+                callback: function (details) {
+                    details.close();
                 },
             },
         },
+        useShadowRoot: true,
         class: "",
         only: false,
         width: "350px",
@@ -3215,7 +3218,7 @@ const PopsAlertConfig = () => {
                 toClose: false,
                 toHide: false,
             },
-            clickCallBack: void 0,
+            clickCallBack: null,
         },
         drag: false,
         dragLimit: true,
@@ -3230,7 +3233,14 @@ const PopsAlertConfig = () => {
 
 class PopsAlert {
     constructor(details) {
-        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+        const guid = popsUtils.getRandomGUID();
+        // 设置当前类型
+        const PopsType = "alert";
+        let config = PopsAlertConfig();
+        config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+        config = popsUtils.assign(config, details);
+        config = PopsHandler.handleOnly(PopsType, config);
+        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
         PopsHandler.handleInit($shadowRoot, [
             pops.config.cssText.index,
             pops.config.cssText.ninePalaceGridPosition,
@@ -3240,13 +3250,6 @@ class PopsAlert {
             pops.config.cssText.common,
             pops.config.cssText.alertCSS,
         ]);
-        let config = PopsAlertConfig();
-        config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-        config = popsUtils.assign(config, details);
-        let guid = popsUtils.getRandomGUID();
-        // 设置当前类型
-        const PopsType = "alert";
-        config = PopsHandler.handleOnly(PopsType, config);
         // 先把z-index提取出来
         let zIndex = PopsHandler.handleZIndex(config.zIndex);
         let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
@@ -3357,8 +3360,8 @@ const PopsConfirmConfig = () => {
                 iconIsLoading: false,
                 text: "确定",
                 type: "primary",
-                callback(event) {
-                    event.close();
+                callback(detail) {
+                    detail.close();
                 },
             },
             cancel: {
@@ -3369,8 +3372,8 @@ const PopsConfirmConfig = () => {
                 iconIsLoading: false,
                 text: "关闭",
                 type: "default",
-                callback(event) {
-                    event.close();
+                callback(detail) {
+                    detail.close();
                 },
             },
             other: {
@@ -3381,17 +3384,18 @@ const PopsConfirmConfig = () => {
                 iconIsLoading: false,
                 text: "其它按钮",
                 type: "default",
-                callback(event) {
-                    event.close();
+                callback(detail) {
+                    detail.close();
                 },
             },
             close: {
                 enable: true,
-                callback(event) {
-                    event.close();
+                callback(detail) {
+                    detail.close();
                 },
             },
         },
+        useShadowRoot: true,
         class: "",
         only: false,
         width: "350px",
@@ -3405,7 +3409,7 @@ const PopsConfirmConfig = () => {
                 toClose: false,
                 toHide: false,
             },
-            clickCallBack: void 0,
+            clickCallBack: null,
         },
         drag: false,
         dragLimit: true,
@@ -3420,7 +3424,14 @@ const PopsConfirmConfig = () => {
 
 class PopsConfirm {
     constructor(details) {
-        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+        const guid = popsUtils.getRandomGUID();
+        // 设置当前类型
+        const PopsType = "confirm";
+        let config = PopsConfirmConfig();
+        config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+        config = popsUtils.assign(config, details);
+        config = PopsHandler.handleOnly(PopsType, config);
+        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
         PopsHandler.handleInit($shadowRoot, [
             pops.config.cssText.index,
             pops.config.cssText.ninePalaceGridPosition,
@@ -3430,13 +3441,6 @@ class PopsConfirm {
             pops.config.cssText.common,
             pops.config.cssText.confirmCSS,
         ]);
-        let config = PopsConfirmConfig();
-        config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-        config = popsUtils.assign(config, details);
-        let guid = popsUtils.getRandomGUID();
-        // 设置当前类型
-        const PopsType = "confirm";
-        config = PopsHandler.handleOnly(PopsType, config);
         // 先把z-index提取出来
         let zIndex = PopsHandler.handleZIndex(config.zIndex);
         let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
@@ -3553,9 +3557,8 @@ const PopsPromptConfig = () => {
                 iconIsLoading: false,
                 text: "确定",
                 type: "success",
-                callback(event) {
-                    console.log(event);
-                    event.close();
+                callback(detail) {
+                    detail.close();
                 },
             },
             cancel: {
@@ -3566,9 +3569,8 @@ const PopsPromptConfig = () => {
                 iconIsLoading: false,
                 text: "关闭",
                 type: "default",
-                callback(event) {
-                    console.log(event);
-                    event.close();
+                callback(detail) {
+                    detail.close();
                 },
             },
             other: {
@@ -3579,19 +3581,18 @@ const PopsPromptConfig = () => {
                 iconIsLoading: false,
                 text: "其它按钮",
                 type: "default",
-                callback(event) {
-                    console.log(event);
-                    event.close();
+                callback(detail) {
+                    detail.close();
                 },
             },
             close: {
                 enable: true,
-                callback(event) {
-                    console.log(event);
-                    event.close();
+                callback(detail) {
+                    detail.close();
                 },
             },
         },
+        useShadowRoot: true,
         class: "",
         only: false,
         width: "350px",
@@ -3605,7 +3606,7 @@ const PopsPromptConfig = () => {
                 toClose: false,
                 toHide: false,
             },
-            clickCallBack: void 0,
+            clickCallBack: null,
         },
         drag: false,
         dragLimit: true,
@@ -3620,7 +3621,14 @@ const PopsPromptConfig = () => {
 
 class PopsPrompt {
     constructor(details) {
-        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+        const guid = popsUtils.getRandomGUID();
+        // 设置当前类型
+        const PopsType = "prompt";
+        let config = PopsPromptConfig();
+        config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+        config = popsUtils.assign(config, details);
+        config = PopsHandler.handleOnly(PopsType, config);
+        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
         PopsHandler.handleInit($shadowRoot, [
             pops.config.cssText.index,
             pops.config.cssText.ninePalaceGridPosition,
@@ -3630,12 +3638,6 @@ class PopsPrompt {
             pops.config.cssText.common,
             pops.config.cssText.promptCSS,
         ]);
-        let config = PopsPromptConfig();
-        config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-        config = popsUtils.assign(config, details);
-        let guid = popsUtils.getRandomGUID();
-        const PopsType = "prompt";
-        config = PopsHandler.handleOnly(PopsType, config);
         // 先把z-index提取出来
         let zIndex = PopsHandler.handleZIndex(config.zIndex);
         let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
@@ -3743,6 +3745,7 @@ const PopsLoadingConfig = () => {
             icon: "loading",
             style: "",
         },
+        useShadowRoot: true,
         class: "",
         only: false,
         zIndex: 10000,
@@ -3752,7 +3755,7 @@ const PopsLoadingConfig = () => {
                 toClose: false,
                 toHide: false,
             },
-            clickCallBack: void 0,
+            clickCallBack: null,
         },
         animation: "pops-anim-fadein-zoom",
         forbiddenScroll: false,
@@ -3843,6 +3846,7 @@ const PopsIframeConfig = () => {
             icon: true,
             text: "",
         },
+        useShadowRoot: true,
         class: "",
         url: window.location.href,
         only: false,
@@ -3853,7 +3857,7 @@ const PopsIframeConfig = () => {
                 toClose: false,
                 toHide: false,
             },
-            clickCallBack: void 0,
+            clickCallBack: null,
         },
         animation: "pops-anim-fadein-zoom",
         position: "center",
@@ -3889,7 +3893,17 @@ const PopsIframeConfig = () => {
 
 class PopsIframe {
     constructor(details) {
-        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+        const guid = popsUtils.getRandomGUID();
+        // 设置当前类型
+        const PopsType = "iframe";
+        let config = PopsIframeConfig();
+        config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+        config = popsUtils.assign(config, details);
+        if (config.url == null) {
+            throw "config.url不能为空";
+        }
+        config = PopsHandler.handleOnly(PopsType, config);
+        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
         PopsHandler.handleInit($shadowRoot, [
             pops.config.cssText.index,
             pops.config.cssText.ninePalaceGridPosition,
@@ -3898,16 +3912,9 @@ class PopsIframe {
             pops.config.cssText.common,
             pops.config.cssText.iframeCSS,
         ]);
-        let config = PopsIframeConfig();
-        config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-        config = popsUtils.assign(config, details);
-        if (config.url == null) {
-            throw "config.url不能为空";
-        }
-        let guid = popsUtils.getRandomGUID();
-        const PopsType = "iframe";
-        config = PopsHandler.handleOnly(PopsType, config);
-        let maskExtraStyle = config.animation != null && config.animation != ""
+        let maskExtraStyle = 
+        // @ts-ignore
+        config.animation != null && config.animation != ""
             ? "position:absolute;"
             : "";
         // 先把z-index提取出来
@@ -4136,12 +4143,17 @@ const PopsDrawerConfig = () => {
             position: "center",
             text: "默认标题",
             html: false,
+            style: "",
         },
         content: {
             text: "默认内容",
             html: false,
+            style: "",
         },
         btn: {
+            merge: false,
+            mergeReverse: false,
+            reverse: false,
             position: "flex-end",
             ok: {
                 enable: true,
@@ -4151,8 +4163,8 @@ const PopsDrawerConfig = () => {
                 iconIsLoading: false,
                 text: "确定",
                 type: "primary",
-                callback(event) {
-                    event.close();
+                callback(detail) {
+                    detail.close();
                 },
             },
             cancel: {
@@ -4163,8 +4175,8 @@ const PopsDrawerConfig = () => {
                 iconIsLoading: false,
                 text: "关闭",
                 type: "default",
-                callback(event) {
-                    event.close();
+                callback(detail) {
+                    detail.close();
                 },
             },
             other: {
@@ -4175,14 +4187,14 @@ const PopsDrawerConfig = () => {
                 iconIsLoading: false,
                 text: "其它按钮",
                 type: "default",
-                callback(event) {
-                    event.close();
+                callback(detail) {
+                    detail.close();
                 },
             },
             close: {
                 enable: true,
-                callback(event) {
-                    event.close();
+                callback(detail) {
+                    detail.close();
                 },
             },
         },
@@ -4192,8 +4204,9 @@ const PopsDrawerConfig = () => {
                 toClose: true,
                 toHide: false,
             },
-            clickCallBack: void 0,
+            clickCallBack: null,
         },
+        useShadowRoot: true,
         class: "",
         zIndex: 10000,
         only: false,
@@ -4212,7 +4225,14 @@ const PopsDrawerConfig = () => {
 
 class PopsDrawer {
     constructor(details) {
-        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+        const guid = popsUtils.getRandomGUID();
+        // 设置当前类型
+        const PopsType = "drawer";
+        let config = PopsDrawerConfig();
+        config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+        config = popsUtils.assign(config, details);
+        config = PopsHandler.handleOnly(PopsType, config);
+        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
         PopsHandler.handleInit($shadowRoot, [
             pops.config.cssText.index,
             pops.config.cssText.ninePalaceGridPosition,
@@ -4222,12 +4242,6 @@ class PopsDrawer {
             pops.config.cssText.common,
             pops.config.cssText.drawerCSS,
         ]);
-        let config = PopsDrawerConfig();
-        config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-        config = popsUtils.assign(config, details);
-        let guid = popsUtils.getRandomGUID();
-        const PopsType = "drawer";
-        config = PopsHandler.handleOnly(PopsType, config);
         // 先把z-index提取出来
         let zIndex = PopsHandler.handleZIndex(config.zIndex);
         let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
@@ -4460,8 +4474,8 @@ const PopsFolderConfig = () => {
                 iconIsLoading: false,
                 text: "确定",
                 type: "primary",
-                callback(event) {
-                    event.close();
+                callback(detail) {
+                    detail.close();
                 },
             },
             cancel: {
@@ -4472,8 +4486,8 @@ const PopsFolderConfig = () => {
                 iconIsLoading: false,
                 text: "关闭",
                 type: "default",
-                callback(event) {
-                    event.close();
+                callback(detail) {
+                    detail.close();
                 },
             },
             other: {
@@ -4484,17 +4498,18 @@ const PopsFolderConfig = () => {
                 iconIsLoading: false,
                 text: "其它按钮",
                 type: "default",
-                callback(event) {
-                    event.close();
+                callback(detail) {
+                    detail.close();
                 },
             },
             close: {
                 enable: true,
-                callback(event) {
-                    event.close();
+                callback(detail) {
+                    detail.close();
                 },
             },
         },
+        useShadowRoot: true,
         class: "",
         only: false,
         width: "500px",
@@ -4508,7 +4523,7 @@ const PopsFolderConfig = () => {
                 toClose: false,
                 toHide: false,
             },
-            clickCallBack: void 0,
+            clickCallBack: null,
         },
         drag: false,
         dragLimit: true,
@@ -4551,7 +4566,14 @@ const Folder_ICON = {
 
 class PopsFolder {
     constructor(details) {
-        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+        const guid = popsUtils.getRandomGUID();
+        // 设置当前类型
+        const PopsType = "folder";
+        let config = PopsFolderConfig();
+        config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+        config = popsUtils.assign(config, details);
+        config = PopsHandler.handleOnly(PopsType, config);
+        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
         PopsHandler.handleInit($shadowRoot, [
             pops.config.cssText.index,
             pops.config.cssText.ninePalaceGridPosition,
@@ -4561,15 +4583,18 @@ class PopsFolder {
             pops.config.cssText.common,
             pops.config.cssText.folderCSS,
         ]);
-        let config = PopsFolderConfig();
-        config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-        config = popsUtils.assign(config, details);
         /* 办公几件套 */
+        // @ts-ignore
         Folder_ICON.docx = Folder_ICON.doc;
+        // @ts-ignore;
         Folder_ICON.rtf = Folder_ICON.doc;
+        // @ts-ignore
         Folder_ICON.xlsx = Folder_ICON.xls;
+        // @ts-ignore
         Folder_ICON.pptx = Folder_ICON.ppt;
+        // @ts-ignore;
         Folder_ICON.dmg = Folder_ICON.ipa;
+        // @ts-ignore
         Folder_ICON.json = Folder_ICON.js;
         /* 压缩包 */
         let zipIconList = [
@@ -4606,23 +4631,25 @@ class PopsFolder {
         /* Android安装包 */
         let androidIconList = ["apk", "apkm", "xapk"];
         zipIconList.forEach((keyName) => {
+            // @ts-ignore
             Folder_ICON[keyName] = Folder_ICON.zip;
         });
         imageIconList.forEach((keyName) => {
+            // @ts-ignore
             Folder_ICON[keyName] = Folder_ICON.png;
         });
         codeLanguageIconList.forEach((keyName) => {
+            // @ts-ignore
             Folder_ICON[keyName] = Folder_ICON.html;
         });
         androidIconList.forEach((keyName) => {
+            // @ts-ignore
             Folder_ICON[keyName] = Folder_ICON.apk;
         });
         if (details?.folder) {
+            // @ts-ignore
             config.folder = details.folder;
         }
-        let guid = popsUtils.getRandomGUID();
-        const PopsType = "folder";
-        config = PopsHandler.handleOnly(PopsType, config);
         // 先把z-index提取出来
         let zIndex = PopsHandler.handleZIndex(config.zIndex);
         let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
@@ -5359,6 +5386,9 @@ const PopsPanelConfig = () => {
                                 className: "panel-switch",
                                 text: "switch",
                                 type: "switch",
+                                // @ts-ignore
+                                props: {},
+                                disabled: false,
                                 attributes: [],
                                 getValue() {
                                     return true;
@@ -5371,6 +5401,8 @@ const PopsPanelConfig = () => {
                                 className: "panel-slider",
                                 text: "slider",
                                 type: "slider",
+                                // @ts-ignore
+                                props: {},
                                 attributes: [],
                                 getValue() {
                                     return 50;
@@ -5385,6 +5417,8 @@ const PopsPanelConfig = () => {
                                 className: "panel-button",
                                 text: "button",
                                 type: "button",
+                                // @ts-ignore
+                                props: {},
                                 attributes: [],
                                 buttonIcon: "eleme",
                                 buttonIconIsLoading: true,
@@ -5397,6 +5431,8 @@ const PopsPanelConfig = () => {
                             {
                                 className: "panel-button",
                                 text: "button",
+                                // @ts-ignore
+                                props: {},
                                 type: "button",
                                 attributes: [],
                                 buttonIcon: "chromeFilled",
@@ -5412,6 +5448,8 @@ const PopsPanelConfig = () => {
                                 text: "button",
                                 type: "button",
                                 attributes: [],
+                                // @ts-ignore
+                                props: {},
                                 buttonIcon: "upload",
                                 buttonIconIsLoading: false,
                                 buttonType: "info",
@@ -5440,6 +5478,8 @@ const PopsPanelConfig = () => {
                         className: "panel-input",
                         text: "input",
                         type: "input",
+                        // @ts-ignore
+                        props: {},
                         attributes: [],
                         getValue() {
                             return "50";
@@ -5453,6 +5493,8 @@ const PopsPanelConfig = () => {
                         className: "panel-input-password",
                         text: "input-password",
                         type: "input",
+                        // @ts-ignore
+                        props: {},
                         attributes: [],
                         getValue() {
                             return "123456";
@@ -5467,6 +5509,8 @@ const PopsPanelConfig = () => {
                         className: "panel-textarea",
                         text: "textarea",
                         type: "textarea",
+                        // @ts-ignore
+                        props: {},
                         attributes: [],
                         getValue() {
                             return "50";
@@ -5480,6 +5524,8 @@ const PopsPanelConfig = () => {
                         className: "panel-select",
                         text: "select",
                         type: "select",
+                        // @ts-ignore
+                        props: {},
                         attributes: [],
                         getValue() {
                             return 50;
@@ -5491,14 +5537,23 @@ const PopsPanelConfig = () => {
                             {
                                 value: "all",
                                 text: "所有",
+                                disable() {
+                                    return false;
+                                },
                             },
                             {
                                 value: "text",
                                 text: "文本",
+                                disable() {
+                                    return false;
+                                },
                             },
                             {
                                 value: "html",
                                 text: "超文本",
+                                disable() {
+                                    return false;
+                                },
                             },
                         ],
                     },
@@ -5506,6 +5561,8 @@ const PopsPanelConfig = () => {
                         className: "panel-select-multiple",
                         type: "select-multiple",
                         text: "select-multiple",
+                        // @ts-ignore
+                        props: {},
                         attributes: [],
                         placeholder: "请至少选择一个选项",
                         getValue() {
@@ -5524,22 +5581,42 @@ const PopsPanelConfig = () => {
                             {
                                 value: "select-1",
                                 text: "单选1",
+                                isHTML: false,
+                                disable() {
+                                    return false;
+                                },
                             },
                             {
                                 value: "select-2",
                                 text: "单选2",
+                                isHTML: false,
+                                disable() {
+                                    return false;
+                                },
                             },
                             {
                                 value: "select-3",
                                 text: "单选3",
+                                isHTML: false,
+                                disable() {
+                                    return false;
+                                },
                             },
                             {
                                 value: "select-4",
                                 text: "单选4",
+                                isHTML: false,
+                                disable() {
+                                    return false;
+                                },
                             },
                             {
                                 value: "select-5",
                                 text: "单选5",
+                                isHTML: false,
+                                disable() {
+                                    return false;
+                                },
                             },
                         ],
                     },
@@ -5571,6 +5648,8 @@ const PopsPanelConfig = () => {
                                                 className: "panel-switch",
                                                 text: "switch",
                                                 type: "switch",
+                                                // @ts-ignore
+                                                props: {},
                                                 attributes: [],
                                                 getValue() {
                                                     return true;
@@ -5582,6 +5661,8 @@ const PopsPanelConfig = () => {
                                             {
                                                 className: "panel-slider",
                                                 text: "slider",
+                                                // @ts-ignore
+                                                props: {},
                                                 type: "slider",
                                                 attributes: [],
                                                 getValue() {
@@ -5596,6 +5677,8 @@ const PopsPanelConfig = () => {
                                             {
                                                 className: "panel-button",
                                                 text: "button",
+                                                // @ts-ignore
+                                                props: {},
                                                 type: "button",
                                                 attributes: [],
                                                 buttonIcon: "eleme",
@@ -5610,6 +5693,8 @@ const PopsPanelConfig = () => {
                                                 className: "panel-button",
                                                 text: "button",
                                                 type: "button",
+                                                // @ts-ignore
+                                                props: {},
                                                 attributes: [],
                                                 buttonIcon: "chromeFilled",
                                                 buttonIconIsLoading: true,
@@ -5622,6 +5707,8 @@ const PopsPanelConfig = () => {
                                             {
                                                 className: "panel-button",
                                                 text: "button",
+                                                // @ts-ignore
+                                                props: {},
                                                 type: "button",
                                                 attributes: [],
                                                 buttonIcon: "upload",
@@ -5649,6 +5736,8 @@ const PopsPanelConfig = () => {
                             {
                                 className: "panel-switch",
                                 text: "switch",
+                                // @ts-ignore
+                                props: {},
                                 type: "switch",
                                 attributes: [],
                                 getValue() {
@@ -5677,8 +5766,9 @@ const PopsPanelConfig = () => {
                 toClose: false,
                 toHide: false,
             },
-            clickCallBack: void 0,
+            clickCallBack: null,
         },
+        useShadowRoot: true,
         class: "",
         mobileClassName: "pops-panel-is-mobile",
         isMobile: false,
@@ -8186,7 +8276,17 @@ const PanelHandleContentDetails = () => {
 
 class PopsPanel {
     constructor(details) {
-        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+        const guid = popsUtils.getRandomGUID();
+        // 设置当前类型
+        const PopsType = "panel";
+        let config = PopsPanelConfig();
+        config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+        config = popsUtils.assign(config, details);
+        if (details && Array.isArray(details.content)) {
+            config.content = details.content;
+        }
+        config = PopsHandler.handleOnly(PopsType, config);
+        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
         PopsHandler.handleInit($shadowRoot, [
             pops.config.cssText.index,
             pops.config.cssText.ninePalaceGridPosition,
@@ -8196,15 +8296,6 @@ class PopsPanel {
             pops.config.cssText.common,
             pops.config.cssText.panelCSS,
         ]);
-        let config = PopsPanelConfig();
-        config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-        config = popsUtils.assign(config, details);
-        if (details && Array.isArray(details.content)) {
-            config.content = details.content;
-        }
-        let guid = popsUtils.getRandomGUID();
-        const PopsType = "panel";
-        config = PopsHandler.handleOnly(PopsType, config);
         // 先把z-index提取出来
         let zIndex = PopsHandler.handleZIndex(config.zIndex);
         let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
@@ -8316,6 +8407,7 @@ const rightClickMenuConfig = () => {
                 icon: pops.config.iconSVG.search,
                 iconIsLoading: false,
                 text: "搜索",
+                item: [],
                 callback(clickEvent, contextMenuEvent, liElement) {
                     console.log("点击：" + this.text, [
                         clickEvent,
@@ -8328,6 +8420,7 @@ const rightClickMenuConfig = () => {
                 icon: pops.config.iconSVG.documentCopy,
                 iconIsLoading: false,
                 text: "复制",
+                item: [],
                 callback(clickEvent, contextMenuEvent, liElement) {
                     console.log("点击：" + this.text, [
                         clickEvent,
@@ -8340,6 +8433,7 @@ const rightClickMenuConfig = () => {
                 icon: pops.config.iconSVG.delete,
                 text: "删除",
                 iconIsLoading: false,
+                item: [],
                 callback(clickEvent, contextMenuEvent, liElement) {
                     console.log("点击：" + this.text, [
                         clickEvent,
@@ -8352,6 +8446,7 @@ const rightClickMenuConfig = () => {
                 icon: pops.config.iconSVG.loading,
                 iconIsLoading: true,
                 text: "加载",
+                item: [],
                 callback(clickEvent, contextMenuEvent, liElement) {
                     console.log("点击：" + this.text, [
                         clickEvent,
@@ -8378,6 +8473,7 @@ const rightClickMenuConfig = () => {
                         icon: "",
                         iconIsLoading: false,
                         text: "处理文件",
+                        item: [],
                         callback(clickEvent, contextMenuEvent, liElement) {
                             console.log("点击：" + this.text, [
                                 clickEvent,
@@ -8402,6 +8498,7 @@ const rightClickMenuConfig = () => {
                                 icon: pops.config.iconSVG.view,
                                 iconIsLoading: false,
                                 text: "查看",
+                                item: [],
                                 callback(clickEvent, contextMenuEvent, liElement) {
                                     console.log("点击：" + this.text, [
                                         clickEvent,
@@ -8415,6 +8512,7 @@ const rightClickMenuConfig = () => {
                 ],
             },
         ],
+        useShadowRoot: true,
         className: "",
         isAnimation: true,
         only: false,
@@ -8427,25 +8525,27 @@ const rightClickMenuConfig = () => {
 
 class PopsRightClickMenu {
     constructor(details) {
-        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
-        PopsHandler.handleInit($shadowRoot, [
-            pops.config.cssText.index,
-            pops.config.cssText.anim,
-            pops.config.cssText.common,
-            pops.config.cssText.rightClickMenu,
-        ]);
+        const guid = popsUtils.getRandomGUID();
+        // 设置当前类型
+        const PopsType = "rightClickMenu";
         let config = rightClickMenuConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, details);
+        config = PopsHandler.handleOnly(PopsType, config);
         if (config.target == null) {
             throw "config.target 不能为空";
         }
         if (details.data) {
+            // @ts-ignore
             config.data = details.data;
         }
-        let guid = popsUtils.getRandomGUID();
-        const PopsType = "rightClickMenu";
-        config = PopsHandler.handleOnly(PopsType, config);
+        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
+        PopsHandler.handleInit($shadowRoot, [
+            pops.config.cssText.index,
+            pops.config.cssText.anim,
+            pops.config.cssText.common,
+            pops.config.cssText.rightClickMenu,
+        ]);
         if (config.style != null) {
             let cssNode = document.createElement("style");
             cssNode.setAttribute("type", "text/css");
@@ -8872,6 +8972,7 @@ const searchSuggestionConfig = () => {
                 liElement.remove();
             },
         },
+        useShadowRoot: true,
         className: "",
         isAbsolute: true,
         isAnimation: true,
@@ -8906,12 +9007,9 @@ const searchSuggestionConfig = () => {
 
 class PopsSearchSuggestion {
     constructor(details) {
-        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
-        PopsHandler.handleInit($shadowRoot, [
-            pops.config.cssText.index,
-            pops.config.cssText.anim,
-            pops.config.cssText.common,
-        ]);
+        const guid = popsUtils.getRandomGUID();
+        // 设置当前类型
+        const PopsType = "searchSuggestion";
         let config = searchSuggestionConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, details);
@@ -8925,8 +9023,12 @@ class PopsSearchSuggestion {
         if (details.data) {
             config.data = details.data;
         }
-        const guid = popsUtils.getRandomGUID();
-        const PopsType = "searchSuggestion";
+        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
+        PopsHandler.handleInit($shadowRoot, [
+            pops.config.cssText.index,
+            pops.config.cssText.anim,
+            pops.config.cssText.common,
+        ]);
         if (config.style != null) {
             let cssNode = document.createElement("style");
             cssNode.setAttribute("type", "text/css");
@@ -9449,8 +9551,9 @@ class PopsSearchSuggestion {
 }
 
 const PopsTooltipConfig = () => {
+    // @ts-ignore
     return {
-        // @ts-ignore
+        useShadowRoot: true,
         target: null,
         content: "默认文字",
         position: "top",
@@ -9470,6 +9573,8 @@ const PopsTooltipConfig = () => {
         showAfterCallBack() { },
         closeBeforeCallBack() { },
         closeAfterCallBack() { },
+        delayCloseTime: 100,
+        showArrow: true,
         arrowDistance: 12.5,
         otherDistance: 0,
         style: "",
@@ -9544,6 +9649,10 @@ class ToolTip {
             });
             $toolTipContainer.appendChild(cssNode);
         }
+        // 处理是否显示箭头元素
+        if (!this.$data.config.showArrow) {
+            $toolTipArrow.remove();
+        }
         return {
             $toolTipContainer: $toolTipContainer,
             $toolTipArrow: $toolTipArrow,
@@ -9583,12 +9692,12 @@ class ToolTip {
         this.$el.$toolTip.style.setProperty("z-index", zIndex.toString());
     }
     /**
-     * 获取 提示框的位置
+     * 计算 提示框的位置
      * @param targetElement 目标元素
      * @param arrowDistance 箭头和目标元素的距离
      * @param otherDistance 其它位置的偏移
      */
-    getPosition(targetElement, arrowDistance, otherDistance) {
+    calcToolTipPosition(targetElement, arrowDistance, otherDistance) {
         let offsetInfo = popsDOMUtils.offset(targetElement, !this.$data.config.isFixed);
         // 目标 宽
         let targetElement_width = offsetInfo.width;
@@ -9637,7 +9746,7 @@ class ToolTip {
      * 动态修改tooltip的位置
      */
     changePosition() {
-        let positionInfo = this.getPosition(this.$data.config.target, this.$data.config.arrowDistance, this.$data.config.otherDistance);
+        let positionInfo = this.calcToolTipPosition(this.$data.config.target, this.$data.config.arrowDistance, this.$data.config.otherDistance);
         let positionKey = this.$data.config.position.toUpperCase();
         let positionDetail = positionInfo[positionKey];
         if (positionDetail) {
@@ -9766,8 +9875,8 @@ class ToolTip {
         // 其它的如Touch事件不做处理
         if (event && event instanceof MouseEvent) {
             let $target = event.composedPath()[0];
-            // 如果是子元素触发的话，忽视
-            if ($target != this.$data.config.target) {
+            // 如果是目标元素的子元素/tooltip元素的子元素触发的话，那就不管
+            if ($target != this.$data.config.target && $target != this.$el.$toolTip) {
                 return;
             }
         }
@@ -9785,6 +9894,10 @@ class ToolTip {
         let timeId = setTimeout(() => {
             // 设置属性触发关闭动画
             this.clearCloseTimeoutId(eventType, timeId);
+            if (this.$el.$toolTip == null) {
+                // 已清除了
+                return;
+            }
             this.$el.$toolTip.setAttribute("data-motion", this.$el.$toolTip
                 .getAttribute("data-motion")
                 .replace("fadeIn", "fadeOut"));
@@ -9850,7 +9963,10 @@ class ToolTip {
      * 鼠标|触摸进入事件
      */
     toolTipMouseEnterEvent() {
-        this.$el.$toolTip.style.animationPlayState = "paused";
+        this.clearCloseTimeoutId("MouseEvent");
+        this.clearCloseTimeoutId("TouchEvent");
+        // 重置动画状态
+        // this.$el.$toolTip.style.animationPlayState = "paused";
         // if (parseInt(getComputedStyle(toolTipElement)) > 0.5) {
         // toolTipElement.style.animationPlayState = "paused";
         // }
@@ -9872,8 +9988,9 @@ class ToolTip {
     /**
      * 鼠标|触摸离开事件
      */
-    toolTipMouseLeaveEvent() {
-        this.$el.$toolTip.style.animationPlayState = "running";
+    toolTipMouseLeaveEvent(event) {
+        this.close(event);
+        // this.$el.$toolTip.style.animationPlayState = "running";
     }
     /**
      * 监听鼠标|触摸离开事件
@@ -9890,22 +10007,23 @@ class ToolTip {
 }
 class PopsTooltip {
     constructor(details) {
-        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
-        PopsHandler.handleInit($shadowRoot, [
-            pops.config.cssText.index,
-            pops.config.cssText.anim,
-            pops.config.cssText.common,
-            pops.config.cssText.tooltipCSS,
-        ]);
+        const guid = popsUtils.getRandomGUID();
+        // 设置当前类型
+        const PopsType = "tooltip";
         let config = PopsTooltipConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, details);
         if (!(config.target instanceof HTMLElement)) {
             throw "config.target 必须是HTMLElement类型";
         }
-        let guid = popsUtils.getRandomGUID();
-        const PopsType = "tooltip";
         config = PopsHandler.handleOnly(PopsType, config);
+        const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
+        PopsHandler.handleInit($shadowRoot, [
+            pops.config.cssText.index,
+            pops.config.cssText.anim,
+            pops.config.cssText.common,
+            pops.config.cssText.tooltipCSS,
+        ]);
         let toolTip = new ToolTip(config, guid, {
             $shadowContainer,
             $shadowRoot,
@@ -9929,7 +10047,7 @@ class Pops {
     /** 配置 */
     config = {
         /** 版本号 */
-        version: "2024.11.3",
+        version: "2024.11.24",
         cssText: {
             /** 主CSS */
             index: indexCSS,