@whitesev/pops 1.9.0 → 1.9.2

package/dist/index.amd.js

@@ -1745,10 +1745,9 @@ define((function () { 'use strict';
         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的元素，调试使用
@@ -1778,17 +1777,18 @@ define((function () { 'use strict';
                 }
             });
             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) {
@@ -2278,7 +2278,7 @@ define((function () { 'use strict';
         },
     };
 
-    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";
 
@@ -2471,7 +2471,7 @@ define((function () { 'use strict';
 		<div 
 			class="pops-anim"
 			anim="${__config.animation || ""}"
-			style="${popsAnimStyle};"
+			style="${popsAnimStyle}"
 			data-guid="${guid}">
             ${config.style != null
             ? `<style tyle="text/css">${config.style}</style>`
@@ -2742,14 +2742,22 @@ define((function () { 'use strict';
         /**
          * 创建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,
+                };
+            }
         },
         /**
          * 处理初始化
@@ -3146,17 +3154,11 @@ define((function () { 'use strict';
             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;
         },
@@ -3193,17 +3195,18 @@ define((function () { 'use strict';
                     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",
@@ -3217,7 +3220,7 @@ define((function () { 'use strict';
                     toClose: false,
                     toHide: false,
                 },
-                clickCallBack: void 0,
+                clickCallBack: null,
             },
             drag: false,
             dragLimit: true,
@@ -3232,7 +3235,14 @@ define((function () { 'use strict';
 
     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,
@@ -3242,13 +3252,6 @@ define((function () { 'use strict';
                 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);
@@ -3359,8 +3362,8 @@ define((function () { 'use strict';
                     iconIsLoading: false,
                     text: "确定",
                     type: "primary",
-                    callback(event) {
-                        event.close();
+                    callback(detail) {
+                        detail.close();
                     },
                 },
                 cancel: {
@@ -3371,8 +3374,8 @@ define((function () { 'use strict';
                     iconIsLoading: false,
                     text: "关闭",
                     type: "default",
-                    callback(event) {
-                        event.close();
+                    callback(detail) {
+                        detail.close();
                     },
                 },
                 other: {
@@ -3383,17 +3386,18 @@ define((function () { 'use strict';
                     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",
@@ -3407,7 +3411,7 @@ define((function () { 'use strict';
                     toClose: false,
                     toHide: false,
                 },
-                clickCallBack: void 0,
+                clickCallBack: null,
             },
             drag: false,
             dragLimit: true,
@@ -3422,7 +3426,14 @@ define((function () { 'use strict';
 
     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,
@@ -3432,13 +3443,6 @@ define((function () { 'use strict';
                 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);
@@ -3555,9 +3559,8 @@ define((function () { 'use strict';
                     iconIsLoading: false,
                     text: "确定",
                     type: "success",
-                    callback(event) {
-                        console.log(event);
-                        event.close();
+                    callback(detail) {
+                        detail.close();
                     },
                 },
                 cancel: {
@@ -3568,9 +3571,8 @@ define((function () { 'use strict';
                     iconIsLoading: false,
                     text: "关闭",
                     type: "default",
-                    callback(event) {
-                        console.log(event);
-                        event.close();
+                    callback(detail) {
+                        detail.close();
                     },
                 },
                 other: {
@@ -3581,19 +3583,18 @@ define((function () { 'use strict';
                     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",
@@ -3607,7 +3608,7 @@ define((function () { 'use strict';
                     toClose: false,
                     toHide: false,
                 },
-                clickCallBack: void 0,
+                clickCallBack: null,
             },
             drag: false,
             dragLimit: true,
@@ -3622,7 +3623,14 @@ define((function () { 'use strict';
 
     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,
@@ -3632,12 +3640,6 @@ define((function () { 'use strict';
                 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);
@@ -3745,6 +3747,7 @@ define((function () { 'use strict';
                 icon: "loading",
                 style: "",
             },
+            useShadowRoot: true,
             class: "",
             only: false,
             zIndex: 10000,
@@ -3754,7 +3757,7 @@ define((function () { 'use strict';
                     toClose: false,
                     toHide: false,
                 },
-                clickCallBack: void 0,
+                clickCallBack: null,
             },
             animation: "pops-anim-fadein-zoom",
             forbiddenScroll: false,
@@ -3845,6 +3848,7 @@ define((function () { 'use strict';
                 icon: true,
                 text: "",
             },
+            useShadowRoot: true,
             class: "",
             url: window.location.href,
             only: false,
@@ -3855,7 +3859,7 @@ define((function () { 'use strict';
                     toClose: false,
                     toHide: false,
                 },
-                clickCallBack: void 0,
+                clickCallBack: null,
             },
             animation: "pops-anim-fadein-zoom",
             position: "center",
@@ -3891,7 +3895,17 @@ define((function () { 'use strict';
 
     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,
@@ -3900,16 +3914,9 @@ define((function () { 'use strict';
                 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提取出来
@@ -4138,12 +4145,17 @@ define((function () { 'use strict';
                 position: "center",
                 text: "默认标题",
                 html: false,
+                style: "",
             },
             content: {
                 text: "默认内容",
                 html: false,
+                style: "",
             },
             btn: {
+                merge: false,
+                mergeReverse: false,
+                reverse: false,
                 position: "flex-end",
                 ok: {
                     enable: true,
@@ -4153,8 +4165,8 @@ define((function () { 'use strict';
                     iconIsLoading: false,
                     text: "确定",
                     type: "primary",
-                    callback(event) {
-                        event.close();
+                    callback(detail) {
+                        detail.close();
                     },
                 },
                 cancel: {
@@ -4165,8 +4177,8 @@ define((function () { 'use strict';
                     iconIsLoading: false,
                     text: "关闭",
                     type: "default",
-                    callback(event) {
-                        event.close();
+                    callback(detail) {
+                        detail.close();
                     },
                 },
                 other: {
@@ -4177,14 +4189,14 @@ define((function () { 'use strict';
                     iconIsLoading: false,
                     text: "其它按钮",
                     type: "default",
-                    callback(event) {
-                        event.close();
+                    callback(detail) {
+                        detail.close();
                     },
                 },
                 close: {
                     enable: true,
-                    callback(event) {
-                        event.close();
+                    callback(detail) {
+                        detail.close();
                     },
                 },
             },
@@ -4194,8 +4206,9 @@ define((function () { 'use strict';
                     toClose: true,
                     toHide: false,
                 },
-                clickCallBack: void 0,
+                clickCallBack: null,
             },
+            useShadowRoot: true,
             class: "",
             zIndex: 10000,
             only: false,
@@ -4214,7 +4227,14 @@ define((function () { 'use strict';
 
     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,
@@ -4224,12 +4244,6 @@ define((function () { 'use strict';
                 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);
@@ -4462,8 +4476,8 @@ define((function () { 'use strict';
                     iconIsLoading: false,
                     text: "确定",
                     type: "primary",
-                    callback(event) {
-                        event.close();
+                    callback(detail) {
+                        detail.close();
                     },
                 },
                 cancel: {
@@ -4474,8 +4488,8 @@ define((function () { 'use strict';
                     iconIsLoading: false,
                     text: "关闭",
                     type: "default",
-                    callback(event) {
-                        event.close();
+                    callback(detail) {
+                        detail.close();
                     },
                 },
                 other: {
@@ -4486,17 +4500,18 @@ define((function () { 'use strict';
                     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",
@@ -4510,7 +4525,7 @@ define((function () { 'use strict';
                     toClose: false,
                     toHide: false,
                 },
-                clickCallBack: void 0,
+                clickCallBack: null,
             },
             drag: false,
             dragLimit: true,
@@ -4553,7 +4568,14 @@ define((function () { 'use strict';
 
     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,
@@ -4563,15 +4585,18 @@ define((function () { 'use strict';
                 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 = [
@@ -4608,23 +4633,25 @@ define((function () { 'use strict';
             /* 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);
@@ -5361,6 +5388,9 @@ define((function () { 'use strict';
                                     className: "panel-switch",
                                     text: "switch",
                                     type: "switch",
+                                    // @ts-ignore
+                                    props: {},
+                                    disabled: false,
                                     attributes: [],
                                     getValue() {
                                         return true;
@@ -5373,6 +5403,8 @@ define((function () { 'use strict';
                                     className: "panel-slider",
                                     text: "slider",
                                     type: "slider",
+                                    // @ts-ignore
+                                    props: {},
                                     attributes: [],
                                     getValue() {
                                         return 50;
@@ -5387,6 +5419,8 @@ define((function () { 'use strict';
                                     className: "panel-button",
                                     text: "button",
                                     type: "button",
+                                    // @ts-ignore
+                                    props: {},
                                     attributes: [],
                                     buttonIcon: "eleme",
                                     buttonIconIsLoading: true,
@@ -5399,6 +5433,8 @@ define((function () { 'use strict';
                                 {
                                     className: "panel-button",
                                     text: "button",
+                                    // @ts-ignore
+                                    props: {},
                                     type: "button",
                                     attributes: [],
                                     buttonIcon: "chromeFilled",
@@ -5414,6 +5450,8 @@ define((function () { 'use strict';
                                     text: "button",
                                     type: "button",
                                     attributes: [],
+                                    // @ts-ignore
+                                    props: {},
                                     buttonIcon: "upload",
                                     buttonIconIsLoading: false,
                                     buttonType: "info",
@@ -5442,6 +5480,8 @@ define((function () { 'use strict';
                             className: "panel-input",
                             text: "input",
                             type: "input",
+                            // @ts-ignore
+                            props: {},
                             attributes: [],
                             getValue() {
                                 return "50";
@@ -5455,6 +5495,8 @@ define((function () { 'use strict';
                             className: "panel-input-password",
                             text: "input-password",
                             type: "input",
+                            // @ts-ignore
+                            props: {},
                             attributes: [],
                             getValue() {
                                 return "123456";
@@ -5469,6 +5511,8 @@ define((function () { 'use strict';
                             className: "panel-textarea",
                             text: "textarea",
                             type: "textarea",
+                            // @ts-ignore
+                            props: {},
                             attributes: [],
                             getValue() {
                                 return "50";
@@ -5482,6 +5526,8 @@ define((function () { 'use strict';
                             className: "panel-select",
                             text: "select",
                             type: "select",
+                            // @ts-ignore
+                            props: {},
                             attributes: [],
                             getValue() {
                                 return 50;
@@ -5493,14 +5539,23 @@ define((function () { 'use strict';
                                 {
                                     value: "all",
                                     text: "所有",
+                                    disable() {
+                                        return false;
+                                    },
                                 },
                                 {
                                     value: "text",
                                     text: "文本",
+                                    disable() {
+                                        return false;
+                                    },
                                 },
                                 {
                                     value: "html",
                                     text: "超文本",
+                                    disable() {
+                                        return false;
+                                    },
                                 },
                             ],
                         },
@@ -5508,6 +5563,8 @@ define((function () { 'use strict';
                             className: "panel-select-multiple",
                             type: "select-multiple",
                             text: "select-multiple",
+                            // @ts-ignore
+                            props: {},
                             attributes: [],
                             placeholder: "请至少选择一个选项",
                             getValue() {
@@ -5526,22 +5583,42 @@ define((function () { 'use strict';
                                 {
                                     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;
+                                    },
                                 },
                             ],
                         },
@@ -5573,6 +5650,8 @@ define((function () { 'use strict';
                                                     className: "panel-switch",
                                                     text: "switch",
                                                     type: "switch",
+                                                    // @ts-ignore
+                                                    props: {},
                                                     attributes: [],
                                                     getValue() {
                                                         return true;
@@ -5584,6 +5663,8 @@ define((function () { 'use strict';
                                                 {
                                                     className: "panel-slider",
                                                     text: "slider",
+                                                    // @ts-ignore
+                                                    props: {},
                                                     type: "slider",
                                                     attributes: [],
                                                     getValue() {
@@ -5598,6 +5679,8 @@ define((function () { 'use strict';
                                                 {
                                                     className: "panel-button",
                                                     text: "button",
+                                                    // @ts-ignore
+                                                    props: {},
                                                     type: "button",
                                                     attributes: [],
                                                     buttonIcon: "eleme",
@@ -5612,6 +5695,8 @@ define((function () { 'use strict';
                                                     className: "panel-button",
                                                     text: "button",
                                                     type: "button",
+                                                    // @ts-ignore
+                                                    props: {},
                                                     attributes: [],
                                                     buttonIcon: "chromeFilled",
                                                     buttonIconIsLoading: true,
@@ -5624,6 +5709,8 @@ define((function () { 'use strict';
                                                 {
                                                     className: "panel-button",
                                                     text: "button",
+                                                    // @ts-ignore
+                                                    props: {},
                                                     type: "button",
                                                     attributes: [],
                                                     buttonIcon: "upload",
@@ -5651,6 +5738,8 @@ define((function () { 'use strict';
                                 {
                                     className: "panel-switch",
                                     text: "switch",
+                                    // @ts-ignore
+                                    props: {},
                                     type: "switch",
                                     attributes: [],
                                     getValue() {
@@ -5679,8 +5768,9 @@ define((function () { 'use strict';
                     toClose: false,
                     toHide: false,
                 },
-                clickCallBack: void 0,
+                clickCallBack: null,
             },
+            useShadowRoot: true,
             class: "",
             mobileClassName: "pops-panel-is-mobile",
             isMobile: false,
@@ -8188,7 +8278,17 @@ define((function () { 'use strict';
 
     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,
@@ -8198,15 +8298,6 @@ define((function () { 'use strict';
                 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);
@@ -8318,6 +8409,7 @@ define((function () { 'use strict';
                     icon: pops.config.iconSVG.search,
                     iconIsLoading: false,
                     text: "搜索",
+                    item: [],
                     callback(clickEvent, contextMenuEvent, liElement) {
                         console.log("点击：" + this.text, [
                             clickEvent,
@@ -8330,6 +8422,7 @@ define((function () { 'use strict';
                     icon: pops.config.iconSVG.documentCopy,
                     iconIsLoading: false,
                     text: "复制",
+                    item: [],
                     callback(clickEvent, contextMenuEvent, liElement) {
                         console.log("点击：" + this.text, [
                             clickEvent,
@@ -8342,6 +8435,7 @@ define((function () { 'use strict';
                     icon: pops.config.iconSVG.delete,
                     text: "删除",
                     iconIsLoading: false,
+                    item: [],
                     callback(clickEvent, contextMenuEvent, liElement) {
                         console.log("点击：" + this.text, [
                             clickEvent,
@@ -8354,6 +8448,7 @@ define((function () { 'use strict';
                     icon: pops.config.iconSVG.loading,
                     iconIsLoading: true,
                     text: "加载",
+                    item: [],
                     callback(clickEvent, contextMenuEvent, liElement) {
                         console.log("点击：" + this.text, [
                             clickEvent,
@@ -8380,6 +8475,7 @@ define((function () { 'use strict';
                             icon: "",
                             iconIsLoading: false,
                             text: "处理文件",
+                            item: [],
                             callback(clickEvent, contextMenuEvent, liElement) {
                                 console.log("点击：" + this.text, [
                                     clickEvent,
@@ -8404,6 +8500,7 @@ define((function () { 'use strict';
                                     icon: pops.config.iconSVG.view,
                                     iconIsLoading: false,
                                     text: "查看",
+                                    item: [],
                                     callback(clickEvent, contextMenuEvent, liElement) {
                                         console.log("点击：" + this.text, [
                                             clickEvent,
@@ -8417,6 +8514,7 @@ define((function () { 'use strict';
                     ],
                 },
             ],
+            useShadowRoot: true,
             className: "",
             isAnimation: true,
             only: false,
@@ -8429,25 +8527,27 @@ define((function () { 'use strict';
 
     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");
@@ -8874,6 +8974,7 @@ define((function () { 'use strict';
                     liElement.remove();
                 },
             },
+            useShadowRoot: true,
             className: "",
             isAbsolute: true,
             isAnimation: true,
@@ -8908,12 +9009,9 @@ define((function () { 'use strict';
 
     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);
@@ -8927,8 +9025,12 @@ define((function () { 'use strict';
             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");
@@ -9451,8 +9553,9 @@ define((function () { 'use strict';
     }
 
     const PopsTooltipConfig = () => {
+        // @ts-ignore
         return {
-            // @ts-ignore
+            useShadowRoot: true,
             target: null,
             content: "默认文字",
             position: "top",
@@ -9472,6 +9575,8 @@ define((function () { 'use strict';
             showAfterCallBack() { },
             closeBeforeCallBack() { },
             closeAfterCallBack() { },
+            delayCloseTime: 100,
+            showArrow: true,
             arrowDistance: 12.5,
             otherDistance: 0,
             style: "",
@@ -9546,6 +9651,10 @@ define((function () { 'use strict';
                 });
                 $toolTipContainer.appendChild(cssNode);
             }
+            // 处理是否显示箭头元素
+            if (!this.$data.config.showArrow) {
+                $toolTipArrow.remove();
+            }
             return {
                 $toolTipContainer: $toolTipContainer,
                 $toolTipArrow: $toolTipArrow,
@@ -9585,12 +9694,12 @@ define((function () { 'use strict';
             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;
@@ -9639,7 +9748,7 @@ define((function () { 'use strict';
          * 动态修改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) {
@@ -9768,8 +9877,8 @@ define((function () { 'use strict';
             // 其它的如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;
                 }
             }
@@ -9787,6 +9896,10 @@ define((function () { 'use strict';
             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"));
@@ -9852,7 +9965,10 @@ define((function () { 'use strict';
          * 鼠标|触摸进入事件
          */
         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";
             // }
@@ -9874,8 +9990,9 @@ define((function () { 'use strict';
         /**
          * 鼠标|触摸离开事件
          */
-        toolTipMouseLeaveEvent() {
-            this.$el.$toolTip.style.animationPlayState = "running";
+        toolTipMouseLeaveEvent(event) {
+            this.close(event);
+            // this.$el.$toolTip.style.animationPlayState = "running";
         }
         /**
          * 监听鼠标|触摸离开事件
@@ -9892,22 +10009,23 @@ define((function () { 'use strict';
     }
     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,
@@ -9931,7 +10049,7 @@ define((function () { 'use strict';
         /** 配置 */
         config = {
             /** 版本号 */
-            version: "2024.11.3",
+            version: "2024.11.24",
             cssText: {
                 /** 主CSS */
                 index: indexCSS,