@whitesev/pops 3.1.3 → 3.2.0

package/dist/index.esm.js

@@ -514,7 +514,7 @@ class PopsUtils {
      * @param propName
      */
     delete(target, propName) {
-        if (typeof Reflect === "object" && Reflect.deleteProperty) {
+        if (typeof Reflect === "object" && typeof Reflect.deleteProperty === "function") {
             Reflect.deleteProperty(target, propName);
         }
         else {
@@ -1020,13 +1020,13 @@ class PopsDOMUtilsEvent {
         if (element == null) {
             return;
         }
-        let elementList = [];
+        let $elList = [];
         if (element instanceof NodeList || Array.isArray(element)) {
             element = element;
-            elementList = [...element];
+            $elList = $elList.concat(element);
         }
         else {
-            elementList.push(element);
+            $elList.push(element);
         }
         let eventTypeList = [];
         if (Array.isArray(eventType)) {
@@ -1077,7 +1077,7 @@ class PopsDOMUtilsEvent {
             // 目标函数、事件名、回调函数、事件配置、过滤函数
             filter = option;
         }
-        elementList.forEach((elementItem) => {
+        $elList.forEach((elementItem) => {
             // 获取对象上的事件
             const elementEvents = Reflect.get(elementItem, SymbolEvents) || {};
             eventTypeList.forEach((eventName) => {
@@ -1124,18 +1124,19 @@ class PopsDOMUtilsEvent {
      * @param eventType （可选）需要取消监听的事件
      */
     offAll(element, eventType) {
+        const that = this;
         if (typeof element === "string") {
-            element = PopsCore.document.querySelectorAll(element);
+            element = that.selectorAll(element);
         }
         if (element == null) {
             return;
         }
-        let elementList = [];
+        let $elList = [];
         if (element instanceof NodeList || Array.isArray(element)) {
-            elementList = [...element];
+            $elList = $elList.concat(Array.from(element));
         }
         else {
-            elementList.push(element);
+            $elList.push(element);
         }
         let eventTypeList = [];
         if (Array.isArray(eventType)) {
@@ -1144,12 +1145,13 @@ class PopsDOMUtilsEvent {
         else if (typeof eventType === "string") {
             eventTypeList = eventTypeList.concat(eventType.split(" "));
         }
-        elementList.forEach((elementItem) => {
-            Object.getOwnPropertySymbols(elementItem).forEach((__symbolEvents) => {
-                if (!__symbolEvents.toString().startsWith("Symbol(events_")) {
+        $elList.forEach(($elItem) => {
+            const symbolList = [...new Set([...Object.getOwnPropertySymbols($elItem), SymbolEvents])];
+            symbolList.forEach((symbolItem) => {
+                if (!symbolItem.toString().startsWith("Symbol(events_")) {
                     return;
                 }
-                const elementEvents = elementItem[__symbolEvents] || {};
+                const elementEvents = Reflect.get($elItem, symbolItem) || {};
                 const iterEventNameList = eventTypeList.length ? eventTypeList : Object.keys(elementEvents);
                 iterEventNameList.forEach((eventName) => {
                     const handlers = elementEvents[eventName];
@@ -1157,11 +1159,12 @@ class PopsDOMUtilsEvent {
                         return;
                     }
                     for (const handler of handlers) {
-                        elementItem.removeEventListener(eventName, handler.callback, {
+                        $elItem.removeEventListener(eventName, handler.callback, {
                             capture: handler["option"]["capture"],
                         });
                     }
-                    popsUtils.delete(elementItem[__symbolEvents], eventName);
+                    const events = Reflect.get($elItem, symbolItem);
+                    popsUtils.delete(events, eventName);
                 });
             });
         });
@@ -1904,7 +1907,8 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
         }
         return $el.classList.contains(className);
     }
-    css(element, property, value) {
+    css($el, property, value) {
+        const that = this;
         /**
          * 把纯数字没有px的加上
          */
@@ -1918,10 +1922,33 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
             }
             return propertyValue;
         }
-        if (typeof element === "string") {
-            element = PopsCore.document.querySelector(element);
+        if (typeof $el === "string") {
+            $el = that.selectorAll($el);
         }
-        if (element == null) {
+        if ($el == null) {
+            return;
+        }
+        if (Array.isArray($el) || $el instanceof NodeList) {
+            if (typeof property === "string") {
+                if (value == null) {
+                    // 获取属性
+                    return that.css($el[0], property);
+                }
+                else {
+                    // 设置属性
+                    $el.forEach(($elItem) => {
+                        that.css($elItem, property);
+                    });
+                    return;
+                }
+            }
+            else if (typeof property === "object") {
+                // 设置属性
+                $el.forEach(($elItem) => {
+                    that.css($elItem, property);
+                });
+                return;
+            }
             return;
         }
         const setStyleProperty = (propertyName, propertyValue) => {
@@ -1930,16 +1957,16 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
                     .trim()
                     .replace(/!important$/gi, "")
                     .trim();
-                element.style.setProperty(propertyName, propertyValue, "important");
+                $el.style.setProperty(propertyName, propertyValue, "important");
             }
             else {
                 propertyValue = handlePixe(propertyName, propertyValue);
-                element.style.setProperty(propertyName, propertyValue);
+                $el.style.setProperty(propertyName, propertyValue);
             }
         };
         if (typeof property === "string") {
             if (value == null) {
-                return getComputedStyle(element).getPropertyValue(property);
+                return PopsCore.globalThis.getComputedStyle($el).getPropertyValue(property);
             }
             else {
                 setStyleProperty(property, value);
@@ -1951,6 +1978,10 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
                 setStyleProperty(prop, value);
             }
         }
+        else {
+            // 其他情况
+            throw new TypeError("property must be string or object");
+        }
     }
     /**
      * 创建元素
@@ -3085,16 +3116,16 @@ const PopsInstanceUtils = {
     },
     /**
      * 删除配置中对应的对象
-     * @param instConfigList 配置实例列表
+     * @param totalInstConfigList 配置实例列表
      * @param  guid 唯一标识
      * @param isAll 是否全部删除
      */
-    removeInstance(instConfigList, guid, isAll = false) {
+    async removeInstance(totalInstConfigList, guid, isAll = false) {
         /**
          * 移除元素实例
          * @param instCommonConfig
          */
-        function removeItem(instCommonConfig) {
+        const removeInst = function (instCommonConfig) {
             if (typeof instCommonConfig.beforeRemoveCallBack === "function") {
                 // 调用移除签的回调
                 instCommonConfig.beforeRemoveCallBack(instCommonConfig);
@@ -3103,39 +3134,44 @@ const PopsInstanceUtils = {
             instCommonConfig?.$pops?.remove();
             instCommonConfig?.$mask?.remove();
             instCommonConfig?.$shadowContainer?.remove();
-        }
+        };
+        const asyncInstTask = [];
         // [ inst[], inst[],...]
-        instConfigList.forEach((instConfigList) => {
+        totalInstConfigList.forEach((instConfigList) => {
             //  inst[]
-            instConfigList.forEach((instConfigItem, index) => {
+            instConfigList.forEach(async (instConfigItem, index) => {
                 // 移除全部或者guid相同
-                if (isAll || instConfigItem["guid"] === guid) {
+                if (isAll || (typeof guid === "string" && instConfigItem.guid === guid)) {
                     // 判断是否有动画
                     const animName = instConfigItem.$anim.getAttribute("anim");
                     if (PopsAnimation.hasAnim(animName)) {
                         const reverseAnimName = animName + "-reverse";
-                        instConfigItem.$anim.style.width = "100%";
-                        instConfigItem.$anim.style.height = "100%";
-                        instConfigItem.$anim.style["animation-name"] = reverseAnimName;
-                        if (PopsAnimation.hasAnim(instConfigItem.$anim.style["animation-name"])) {
-                            popsDOMUtils.on(instConfigItem.$anim, popsDOMUtils.getAnimationEndNameList(), function () {
-                                removeItem(instConfigItem);
-                            }, {
-                                capture: true,
-                            });
+                        popsDOMUtils.css(instConfigItem.$anim, "width", "100%");
+                        popsDOMUtils.css(instConfigItem.$anim, "height", "100%");
+                        popsDOMUtils.css(instConfigItem.$anim, "animation-name", reverseAnimName);
+                        if (PopsAnimation.hasAnim(popsDOMUtils.css(instConfigItem.$anim, "animation-name"))) {
+                            asyncInstTask.push(new Promise((resolve) => {
+                                popsDOMUtils.on(instConfigItem.$anim, popsDOMUtils.getAnimationEndNameList(), function () {
+                                    removeInst(instConfigItem);
+                                    resolve();
+                                }, {
+                                    capture: true,
+                                });
+                            }));
                         }
                         else {
-                            removeItem(instConfigItem);
+                            removeInst(instConfigItem);
                         }
                     }
                     else {
-                        removeItem(instConfigItem);
+                        removeInst(instConfigItem);
                     }
                     instConfigList.splice(index, 1);
                 }
             });
         });
-        return instConfigList;
+        await Promise.all(asyncInstTask);
+        return totalInstConfigList;
     },
     /**
      * 隐藏
@@ -3280,8 +3316,9 @@ const PopsInstanceUtils = {
      * @param config
      * @param $anim
      */
-    close(config, popsType, instConfigList, guid, $anim) {
-        return new Promise((resolve) => {
+    async close(config, popsType, instConfigList, guid, $anim) {
+        // eslint-disable-next-line no-async-promise-executor
+        await new Promise(async (resolve) => {
             const $pops = $anim.querySelector(".pops[type-value]");
             const drawerConfig = config;
             /**
@@ -3291,12 +3328,12 @@ const PopsInstanceUtils = {
                 /**
                  * 弹窗已关闭的回调
                  */
-                function closeCallBack(event) {
+                async function closeCallBack(event) {
                     if (event.propertyName !== "transform") {
                         return;
                     }
-                    popsDOMUtils.off($pops, popsDOMUtils.getTransitionEndNameList(), void 0, closeCallBack);
-                    PopsInstanceUtils.removeInstance([instConfigList], guid);
+                    popsDOMUtils.off($pops, popsDOMUtils.getTransitionEndNameList(), closeCallBack);
+                    await PopsInstanceUtils.removeInstance([instConfigList], guid);
                     resolve();
                 }
                 // 监听过渡结束
@@ -3328,10 +3365,32 @@ const PopsInstanceUtils = {
                 }, drawerConfig.closeDelay);
             }
             else {
-                PopsInstanceUtils.removeInstance([instConfigList], guid);
+                await PopsInstanceUtils.removeInstance([instConfigList], guid);
                 resolve();
             }
         });
+        // 判断组件内是否有rightClickMenu、tooltip、searchSuggestion组件
+        // 有的话也需要关闭
+        PopsInstData.rightClickMenu.forEach((itemConfig) => {
+            const config = itemConfig.config;
+            if (config.$target instanceof HTMLElement) {
+                const $root = config.$target.getRootNode();
+                if ($root instanceof HTMLElement && $root.parentElement == null) {
+                    // 触发销毁元素
+                    itemConfig.destory();
+                }
+            }
+        });
+        PopsInstData.tooltip.forEach((itemConfig) => {
+            const config = itemConfig.config;
+            if (config.$target instanceof HTMLElement) {
+                const $root = config.$target.getRootNode();
+                if ($root instanceof HTMLElement && $root.parentElement == null) {
+                    // 触发销毁元素
+                    itemConfig.destory();
+                }
+            }
+        });
     },
     /**
      * 拖拽元素
@@ -3670,12 +3729,12 @@ const PopsHandler = {
                     element.hasAttribute("anim"));
             }
             // 判断按下的元素是否是pops-anim
-            popsDOMUtils.on(config.animElement, ["touchstart", "mousedown"], void 0, (event) => {
+            popsDOMUtils.on(config.animElement, ["touchstart", "mousedown"], (event) => {
                 const $click = event.composedPath()[0];
                 isMaskClick = isAnimElement($click);
             });
             // 如果有动画层，在动画层上监听点击事件
-            popsDOMUtils.on(config.animElement, "click", void 0, (event) => {
+            popsDOMUtils.on(config.animElement, "click", (event) => {
                 const $click = event.composedPath()[0];
                 if (isAnimElement($click) && isMaskClick) {
                     return clickEvent(event);
@@ -3683,7 +3742,7 @@ const PopsHandler = {
             });
             // 在遮罩层监听点击事件
             // 如果有动画层，那么该点击事件触发不了
-            popsDOMUtils.on(result.maskElement, "click", void 0, (event) => {
+            popsDOMUtils.on(result.maskElement, "click", (event) => {
                 isMaskClick = true;
                 clickEvent(event);
             });
@@ -3826,13 +3885,13 @@ const PopsHandler = {
      * @param guid
      * @param $shadowContainer
      * @param $shadowRoot
-     * @param mode 当前弹窗类型
+     * @param type 当前弹窗类型
      * @param $anim 动画层
      * @param $pops 主元素
      * @param $mask 遮罩层
      * @param config 当前配置
      */
-    handleEventConfig(config, guid, $shadowContainer, $shadowRoot, mode, $anim, $pops, $mask) {
+    handleEventConfig(config, guid, $shadowContainer, $shadowRoot, type, $anim, $pops, $mask) {
         return {
             $shadowContainer: $shadowContainer,
             $shadowRoot: $shadowRoot,
@@ -3840,44 +3899,47 @@ const PopsHandler = {
             $anim: $anim,
             $pops: $pops,
             $mask: $mask,
-            mode: mode,
+            mode: type,
             guid: guid,
             close() {
-                return PopsInstanceUtils.close(config, mode, PopsInstData[mode], guid, $anim);
+                return PopsInstanceUtils.close(config, type, PopsInstData[type], guid, $anim);
             },
             hide() {
-                return PopsInstanceUtils.hide(config, mode, PopsInstData[mode], guid, $anim, $mask);
+                return PopsInstanceUtils.hide(config, type, PopsInstData[type], guid, $anim, $mask);
             },
-            show() {
-                return PopsInstanceUtils.show(config, mode, PopsInstData[mode], guid, $anim, $mask);
+            show($parent) {
+                if ($parent) {
+                    $parent.appendChild(PopsInstData[type][0].$shadowRoot);
+                }
+                return PopsInstanceUtils.show(config, type, PopsInstData[type], guid, $anim, $mask);
             },
         };
     },
     /**
      * 获取loading的事件配置
      * @param guid
-     * @param mode 当前弹窗类型
+     * @param type 当前弹窗类型
      * @param $anim 动画层
      * @param $pops 主元素
      * @param $mask 遮罩层
      * @param config 当前配置
      */
-    handleLoadingEventConfig(config, guid, mode, $anim, $pops, $mask) {
+    handleLoadingEventConfig(config, guid, type, $anim, $pops, $mask) {
         return {
             $el: $anim,
             $anim: $anim,
             $pops: $pops,
             $mask: $mask,
-            mode: mode,
+            mode: type,
             guid: guid,
             close() {
-                return PopsInstanceUtils.close(config, mode, PopsInstData[mode], guid, $anim);
+                return PopsInstanceUtils.close(config, type, PopsInstData[type], guid, $anim);
             },
             hide() {
-                return PopsInstanceUtils.hide(config, mode, PopsInstData[mode], guid, $anim, $mask);
+                return PopsInstanceUtils.hide(config, type, PopsInstData[type], guid, $anim, $mask);
             },
             show() {
-                return PopsInstanceUtils.show(config, mode, PopsInstData[mode], guid, $anim, $mask);
+                return PopsInstanceUtils.show(config, type, PopsInstData[type], guid, $anim, $mask);
             },
         };
     },
@@ -3990,8 +4052,8 @@ const PopsHandler = {
     handleOnly(type, config) {
         if (config.only) {
             // .loading
-            // .tooltip
             // .rightClickMenu
+            // .tooltip
             // 单独处理
             if (type === "loading" || type === "tooltip" || type === "rightClickMenu") {
                 const inst = PopsInstData[type];
@@ -4003,11 +4065,11 @@ const PopsHandler = {
                 PopsInstanceUtils.removeInstance([
                     PopsInstData.alert,
                     PopsInstData.confirm,
-                    PopsInstData.prompt,
-                    PopsInstData.iframe,
                     PopsInstData.drawer,
                     PopsInstData.folder,
+                    PopsInstData.iframe,
                     PopsInstData.panel,
+                    PopsInstData.prompt,
                 ], "", true);
             }
         }
@@ -4171,6 +4233,7 @@ const PopsAlert = {
         }
         // 处理返回的配置
         const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask);
+        const result = PopsHandler.handleResultConfig(evtConfig);
         // 为顶部右边的关闭按钮添加点击事件
         PopsHandler.handleClickEvent("close", $headerCloseBtn, evtConfig, config.btn.close?.callback);
         // 为底部ok按钮添加点击事件
@@ -4193,6 +4256,8 @@ const PopsAlert = {
             $mask: $mask,
             $shadowContainer: $shadowContainer,
             $shadowRoot: $shadowRoot,
+            config: config,
+            destory: result.close,
         });
         // 拖拽
         if (config.drag) {
@@ -4204,7 +4269,6 @@ const PopsAlert = {
                 endCallBack: config.dragEndCallBack,
             });
         }
-        const result = PopsHandler.handleResultConfig(evtConfig);
         return result;
     },
 };
@@ -4378,6 +4442,7 @@ const PopsConfirm = {
             $elList.push($mask);
         }
         const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask);
+        const result = PopsHandler.handleResultConfig(evtConfig);
         PopsHandler.handleClickEvent("close", $btnClose, evtConfig, config.btn.close.callback);
         PopsHandler.handleClickEvent("ok", $btnOk, evtConfig, config.btn.ok.callback);
         PopsHandler.handleClickEvent("cancel", $btnCancel, evtConfig, config.btn.cancel.callback);
@@ -4398,6 +4463,8 @@ const PopsConfirm = {
             $mask: $mask,
             $shadowContainer: $shadowContainer,
             $shadowRoot: $shadowRoot,
+            config: config,
+            destory: result.close,
         });
         // 拖拽
         if (config.drag) {
@@ -4409,7 +4476,6 @@ const PopsConfirm = {
                 endCallBack: config.dragEndCallBack,
             });
         }
-        const result = PopsHandler.handleResultConfig(evtConfig);
         return result;
     },
 };
@@ -4588,6 +4654,7 @@ const PopsDrawer = {
             $elList.push($mask);
         }
         const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask);
+        const result = PopsHandler.handleResultConfig(evtConfig);
         // 处理方向
         $pops.setAttribute("direction", config.direction);
         // 处理border-radius
@@ -4683,8 +4750,9 @@ const PopsDrawer = {
             $mask: $mask,
             $shadowContainer: $shadowContainer,
             $shadowRoot: $shadowRoot,
+            config: config,
+            destory: result.close,
         });
-        const result = PopsHandler.handleResultConfig(evtConfig);
         return result;
     },
 };
@@ -5193,6 +5261,7 @@ const PopsFolder = {
         }
         // 事件
         const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask);
+        const result = PopsHandler.handleResultConfig(evtConfig);
         PopsHandler.handleClickEvent("close", $btnCloseBtn, evtConfig, config.btn.close.callback);
         PopsHandler.handleClickEvent("ok", btnOkElement, evtConfig, config.btn.ok.callback);
         PopsHandler.handleClickEvent("cancel", btnCancelElement, evtConfig, config.btn.cancel.callback);
@@ -5772,8 +5841,9 @@ const PopsFolder = {
             $mask: $mask,
             $shadowContainer: $shadowContainer,
             $shadowRoot: $shadowRoot,
+            config: config,
+            destory: result.close,
         });
-        const result = PopsHandler.handleResultConfig(evtConfig);
         return result;
     },
 };
@@ -5929,6 +5999,7 @@ const PopsIframe = {
         const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask);
         // 赋值额外的$iframe参数
         evtConfig.$iframe = $iframe;
+        const result = PopsHandler.handleResultConfig(evtConfig);
         popsDOMUtils.on($anim, popsDOMUtils.getAnimationEndNameList(), function () {
             // 动画加载完毕
             $anim.style.width = "0%";
@@ -6060,10 +6131,10 @@ const PopsIframe = {
             capture: true,
         });
         // 关闭按钮点击事件
-        popsDOMUtils.on(headerCloseBtnElement, "click", (event) => {
+        popsDOMUtils.on(headerCloseBtnElement, "click", async (event) => {
             event.preventDefault();
             event.stopPropagation();
-            PopsInstanceUtils.removeInstance([PopsInstData.iframe], guid, false);
+            await PopsInstanceUtils.removeInstance([PopsInstData.iframe], guid, false);
             if (typeof config?.btn?.close?.callback === "function") {
                 config.btn.close.callback(evtConfig, event);
             }
@@ -6077,8 +6148,9 @@ const PopsIframe = {
             $mask: $mask,
             $shadowContainer: $shadowContainer,
             $shadowRoot: $shadowRoot,
+            config: config,
+            destory: result.close,
         });
-        const result = PopsHandler.handleResultConfig(evtConfig);
         return result;
     },
 };
@@ -7044,7 +7116,7 @@ const PopsTooltipDefaultConfig = () => {
         isFixed: false,
         alwaysShow: false,
         onShowEventName: "mouseenter touchstart",
-        onCloseEventName: "mouseleave touchend",
+        onCloseEventName: "mouseleave touchend touchcancel",
         zIndex: 10000,
         only: false,
         eventOption: {
@@ -7270,12 +7342,12 @@ class ToolTip {
     changePosition(event) {
         const positionInfo = this.calcToolTipPosition(this.$data.config.$target, this.$data.config.arrowDistance, this.$data.config.otherDistance, event);
         const positionKey = this.$data.config.position.toUpperCase();
-        const positionDetail = positionInfo[positionKey];
-        if (positionDetail) {
-            this.$el.$toolTip.style.left = positionDetail.left + "px";
-            this.$el.$toolTip.style.top = positionDetail.top + "px";
-            this.$el.$toolTip.setAttribute("data-motion", positionDetail.motion);
-            this.$el.$arrow.setAttribute("data-position", positionDetail.arrow);
+        const position = positionInfo[positionKey];
+        if (position) {
+            this.$el.$toolTip.style.left = position.left + "px";
+            this.$el.$toolTip.style.top = position.top + "px";
+            this.$el.$toolTip.setAttribute("data-motion", position.motion);
+            this.$el.$arrow.setAttribute("data-position", position.arrow);
         }
         else {
             console.error("不存在该位置", this.$data.config.position);
@@ -7447,13 +7519,13 @@ class ToolTip {
      */
     destory() {
         if (this.$el.$toolTip) {
-            this.$el.$shadowRoot.removeChild(this.$el.$toolTip);
+            this.$el.$toolTip.remove();
         }
-        // @ts-ignore
+        // @ts-expect-error
         this.$el.$toolTip = null;
-        // @ts-ignore
+        // @ts-expect-error
         this.$el.$arrow = null;
-        // @ts-ignore
+        // @ts-expect-error
         this.$el.$content = null;
     }
     /**
@@ -7501,29 +7573,29 @@ class ToolTip {
         popsDOMUtils.on(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent, this.$data.config.eventOption);
     }
     /**
-     * 取消监听鼠标|触摸事件
+     * 取消监听事件 - 鼠标|触摸
      */
     offToolTipMouseEnterEvent() {
         popsDOMUtils.off(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent, this.$data.config.eventOption);
     }
     /**
-     * 鼠标|触摸离开事件
+     * 离开事件 - 鼠标|触摸
      */
     toolTipMouseLeaveEvent(event) {
         this.close(event);
         // this.$el.$toolTip.style.animationPlayState = "running";
     }
     /**
-     * 监听鼠标|触摸离开事件
+     * 监听离开事件 - 鼠标|触摸
      */
     onToolTipMouseLeaveEvent() {
-        popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent, this.$data.config.eventOption);
+        popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend touchcancel", this.toolTipMouseLeaveEvent, this.$data.config.eventOption);
     }
     /**
-     * 取消监听鼠标|触摸离开事件
+     * 取消监听离开事件 - 鼠标|触摸
      */
     offToolTipMouseLeaveEvent() {
-        popsDOMUtils.off(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent, this.$data.config.eventOption);
+        popsDOMUtils.off(this.$el.$toolTip, "mouseleave touchend touchcancel", this.toolTipMouseLeaveEvent, this.$data.config.eventOption);
     }
 }
 const PopsTooltip = {
@@ -7538,6 +7610,15 @@ const PopsTooltip = {
             throw new TypeError("config.target 必须是HTMLElement类型");
         }
         config = PopsHandler.handleOnly(popsType, config);
+        if (config.position === "follow") {
+            config.onShowEventName = config.onShowEventName.trim();
+            const showEventNameSplit = config.onShowEventName.split(" ");
+            ["mousemove", "touchmove"].forEach((it) => {
+                if (showEventNameSplit.includes(it))
+                    return;
+                config.onShowEventName += ` ${it}`;
+            });
+        }
         const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
         PopsHandler.handleInit($shadowRoot, [
             {
@@ -8802,7 +8883,7 @@ const PanelHandlerComponents = () => {
                  * 监听输入框内容改变
                  */
                 onValueChange() {
-                    popsDOMUtils.on(this.$el.input, ["input", "propertychange"], void 0, (event) => {
+                    popsDOMUtils.on(this.$el.input, ["input", "propertychange"], (event) => {
                         this.$data.value = this.$el.input.value;
                         if (inputType !== "password") {
                             // 不是密码框
@@ -9175,7 +9256,7 @@ const PanelHandlerComponents = () => {
                      * 监听点击事件
                      */
                     onClick() {
-                        popsDOMUtils.on(this.$el.$select, "click", void 0, (event) => {
+                        popsDOMUtils.on(this.$el.$select, "click", (event) => {
                             this.setSelectOptionsDisableStatus();
                             if (typeof viewConfig.clickCallBack === "function") {
                                 const $isSelectedElement = this.$el.$select[this.$el.$select.selectedIndex];
@@ -10942,7 +11023,7 @@ const PanelHandlerComponents = () => {
                  * 设置按钮的点击事件
                  */
                 onButtonClick() {
-                    popsDOMUtils.on(this.$ele.button, "click", void 0, (event) => {
+                    popsDOMUtils.on(this.$ele.button, "click", (event) => {
                         if (typeof viewConfig.callback === "function") {
                             viewConfig.callback(event);
                         }
@@ -11011,13 +11092,13 @@ const PanelHandlerComponents = () => {
                 initContainerItem($container, formItemConfig) {
                     const containerViewConfig = formItemConfig;
                     if (containerViewConfig.type === "container") {
-                        const childForms = containerViewConfig["views"];
+                        const childViewConfig = containerViewConfig["views"];
                         // 每一项<li>元素
-                        const formContainerListElement = popsDOMUtils.createElement("li");
+                        const $itemLi = popsDOMUtils.createElement("li");
                         // 每一项<li>内的子<ul>元素
-                        const formContainerULElement = popsDOMUtils.createElement("ul");
-                        formContainerULElement.classList.add("pops-panel-forms-container-item-formlist");
-                        formContainerListElement.classList.add("pops-panel-forms-container-item");
+                        const $itemUL = popsDOMUtils.createElement("ul");
+                        $itemUL.classList.add("pops-panel-forms-container-item-formlist");
+                        $itemLi.classList.add("pops-panel-forms-container-item");
                         // 区域头部的文字
                         const formHeaderDivElement = popsDOMUtils.createElement("div", {
                             className: "pops-panel-forms-container-item-header-text",
@@ -11037,42 +11118,42 @@ const PanelHandlerComponents = () => {
 							`);
                             // 添加点击事件
                             popsDOMUtils.on(formHeaderDivElement, "click", () => {
-                                if (formContainerListElement.hasAttribute("data-fold-enable")) {
-                                    formContainerListElement.removeAttribute("data-fold-enable");
+                                if ($itemLi.hasAttribute("data-fold-enable")) {
+                                    $itemLi.removeAttribute("data-fold-enable");
                                 }
                                 else {
-                                    formContainerListElement.setAttribute("data-fold-enable", "");
+                                    $itemLi.setAttribute("data-fold-enable", "");
                                 }
                             });
                             popsDOMUtils.addClassName(formHeaderDivElement, "pops-panel-forms-fold-container");
                             popsDOMUtils.addClassName(formHeaderDivElement, PopsCommonCSSClassName.userSelectNone);
-                            formContainerListElement.setAttribute("data-fold-enable", "");
+                            $itemLi.setAttribute("data-fold-enable", "");
                             popsDOMUtils.addClassName(formHeaderDivElement, "pops-panel-forms-fold");
-                            formContainerListElement.appendChild(formHeaderDivElement);
+                            $itemLi.appendChild(formHeaderDivElement);
                         }
                         else {
                             // 加进容器内
-                            formContainerListElement.appendChild(formHeaderDivElement);
+                            $itemLi.appendChild(formHeaderDivElement);
                         }
-                        that.setElementClassName(formContainerListElement, formItemConfig.className);
-                        that.setElementAttributes(formContainerListElement, formItemConfig.attributes);
-                        that.setElementProps(formContainerListElement, formItemConfig.props);
-                        childForms.forEach((childViewConfig) => {
+                        that.setElementClassName($itemLi, formItemConfig.className);
+                        that.setElementAttributes($itemLi, formItemConfig.attributes);
+                        that.setElementProps($itemLi, formItemConfig.props);
+                        $itemLi.appendChild($itemUL);
+                        $container.appendChild($itemLi);
+                        childViewConfig.forEach((childViewConfig) => {
                             that.uListContainerAddItem(childViewConfig, {
-                                ulElement: formContainerULElement,
+                                ulElement: $itemUL,
                                 sectionContainerULElement: that.sectionContainerULElement,
-                                formContainerListElement: formContainerListElement,
+                                formContainerListElement: $itemLi,
                                 formHeaderDivElement: formHeaderDivElement,
                             });
                         });
-                        formContainerListElement.appendChild(formContainerULElement);
-                        $container.appendChild(formContainerListElement);
                         if (typeof containerViewConfig.afterAddToUListCallBack === "function") {
                             containerViewConfig.afterAddToUListCallBack(viewConfig, {
-                                target: formContainerListElement,
-                                ulElement: formContainerULElement,
+                                target: $itemLi,
+                                ulElement: $itemUL,
                                 sectionContainerULElement: that.sectionContainerULElement,
-                                formContainerListElement: formContainerListElement,
+                                formContainerListElement: $itemLi,
                                 formHeaderDivElement: formHeaderDivElement,
                             });
                         }
@@ -11211,7 +11292,7 @@ const PanelHandlerComponents = () => {
                 },
                 /** 设置项的点击事件 */
                 onLiClick() {
-                    popsDOMUtils.on($li, "click", void 0, async (event) => {
+                    popsDOMUtils.on($li, "click", async (event) => {
                         if (typeof viewConfig.clickCallBack === "function") {
                             const result = await viewConfig.clickCallBack(event, viewConfig);
                             if (result) {
@@ -11539,6 +11620,7 @@ const PopsPanel = {
         }
         // 处理返回的配置
         const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask);
+        const result = PopsHandler.handleResultConfig(evtConfig);
         // 为顶部右边的关闭按钮添加点击事件
         PopsHandler.handleClickEvent("close", $headerBtnClose, evtConfig, config.btn?.close?.callback);
         // 创建到页面中
@@ -11576,6 +11658,8 @@ const PopsPanel = {
             $mask: $mask,
             $shadowContainer: $shadowContainer,
             $shadowRoot: $shadowRoot,
+            config: config,
+            destory: result.close,
         });
         // 拖拽
         if (config.drag) {
@@ -11587,7 +11671,6 @@ const PopsPanel = {
                 endCallBack: config.dragEndCallBack,
             });
         }
-        const result = PopsHandler.handleResultConfig(evtConfig);
         return {
             ...result,
             addEventListener: (event, listener, options) => {
@@ -11779,6 +11862,7 @@ const PopsPrompt = {
             $elList.push($mask);
         }
         const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask);
+        const result = PopsHandler.handleResultConfig(evtConfig);
         // 输入框赋值初始值
         $input.value = config.content.text;
         PopsHandler.handlePromptClickEvent("close", $input, $btnClose, evtConfig, config.btn.close.callback);
@@ -11801,6 +11885,8 @@ const PopsPrompt = {
             $mask: $mask,
             $shadowContainer: $shadowContainer,
             $shadowRoot: $shadowRoot,
+            config: config,
+            destory: result.close,
         });
         // 拖拽
         if (config.drag) {
@@ -11820,7 +11906,6 @@ const PopsPrompt = {
         if (config.content.select) {
             $input.select();
         }
-        const result = PopsHandler.handleResultConfig(evtConfig);
         return result;
     },
 };
@@ -11922,6 +12007,7 @@ const PopsRightClickMenuDefaultConfig = () => {
         beforeAppendToPageCallBack() { },
         limitPositionXInView: true,
         limitPositionYInView: true,
+        beforeShowCallBack() { },
     };
 };
 
@@ -11981,6 +12067,8 @@ const PopsRightClickMenu = {
                     return;
                 }
                 if ($click.className && $click.className === "pops-shadow-container" && $click.shadowRoot != null) {
+                    // pops的shadow-container
+                    PopsContextMenu.shadowRootCheckClickEvent(event);
                     return;
                 }
                 PopsContextMenu.closeAllMenu(PopsContextMenu.$el.$root);
@@ -11993,7 +12081,7 @@ const PopsRightClickMenu = {
                 if (!PopsContextMenu.$el.$root) {
                     return;
                 }
-                const $click = event.target;
+                const $click = event.composedPath()[0];
                 if ($click.closest(`.pops-${popsType}`)) {
                     return;
                 }
@@ -12003,13 +12091,13 @@ const PopsRightClickMenu = {
              * 添加全局点击检测事件
              */
             addWindowCheckClickListener() {
-                popsDOMUtils.on(globalThis, "click touchstart", void 0, PopsContextMenu.windowCheckClickEvent, {
+                popsDOMUtils.on(globalThis, "click touchstart", PopsContextMenu.windowCheckClickEvent, {
                     capture: true,
                 });
                 if (config.$target instanceof Node) {
                     const $shadowRoot = config.$target.getRootNode();
                     if ($shadowRoot instanceof ShadowRoot) {
-                        popsDOMUtils.on($shadowRoot, "click touchstart", void 0, PopsContextMenu.shadowRootCheckClickEvent, {
+                        popsDOMUtils.on($shadowRoot, "click touchstart", PopsContextMenu.shadowRootCheckClickEvent, {
                             capture: true,
                         });
                     }
@@ -12019,13 +12107,13 @@ const PopsRightClickMenu = {
              * 移除全局点击检测事件
              */
             removeWindowCheckClickListener() {
-                popsDOMUtils.off(globalThis, "click touchstart", void 0, PopsContextMenu.windowCheckClickEvent, {
+                popsDOMUtils.off(globalThis, "click touchstart", PopsContextMenu.windowCheckClickEvent, {
                     capture: true,
                 });
                 if (config.$target instanceof Node) {
                     const $shadowRoot = config.$target.getRootNode();
                     if ($shadowRoot instanceof ShadowRoot) {
-                        popsDOMUtils.off($shadowRoot, "click touchstart", void 0, PopsContextMenu.windowCheckClickEvent, {
+                        popsDOMUtils.off($shadowRoot, "click touchstart", PopsContextMenu.windowCheckClickEvent, {
                             capture: true,
                         });
                     }
@@ -12036,7 +12124,7 @@ const PopsRightClickMenu = {
              * @param event
              * @param selectorTarget
              */
-            contextMenuEvent(event, selectorTarget) {
+            async contextMenuEvent(event, selectorTarget) {
                 if (config.preventDefault) {
                     popsDOMUtils.preventEvent(event);
                 }
@@ -12045,6 +12133,10 @@ const PopsRightClickMenu = {
                     PopsContextMenu.closeAllMenu(PopsContextMenu.$el.$root);
                 }
                 selectorTarget = selectorTarget ?? config.$target;
+                const beforeShowCallBackResult = await config?.beforeShowCallBack(event);
+                if (typeof beforeShowCallBackResult === "boolean" && !beforeShowCallBackResult) {
+                    return;
+                }
                 const rootElement = PopsContextMenu.showMenu(event, config.data, selectorTarget);
                 PopsContextMenu.$el.$root = rootElement;
                 if (config.only) {
@@ -12057,6 +12149,10 @@ const PopsRightClickMenu = {
                         beforeRemoveCallBack(instCommonConfig) {
                             PopsContextMenu.closeAllMenu(instCommonConfig.$pops);
                         },
+                        config: config,
+                        destory: () => {
+                            PopsContextMenu.closeAllMenu(rootElement);
+                        },
                     });
                 }
             },
@@ -12360,7 +12456,8 @@ const PopsRightClickMenu = {
                         menuLiElement.appendChild(iconElement);
                     }
                     // 插入文字
-                    menuLiElement.insertAdjacentHTML("beforeend", PopsSafeUtils.getSafeHTML(`<span>${item.text}</span>`));
+                    const text = typeof item.text === "function" ? item.text() : item.text;
+                    menuLiElement.insertAdjacentHTML("beforeend", PopsSafeUtils.getSafeHTML(`<span>${text}</span>`));
                     // 如果存在子数据，显示
                     if (item.item && Array.isArray(item.item)) {
                         popsDOMUtils.addClassName(menuLiElement, `pops-${popsType}-item`);
@@ -12999,10 +13096,10 @@ const PopsSearchSuggestion = {
             setShowEvent(option = defaultListenerOption) {
                 /* 焦点|点击事件*/
                 if (config.followPosition === "target") {
-                    popsDOMUtils.on([config.$target], ["focus", "click"], void 0, SearchSuggestion.showEvent, option);
+                    popsDOMUtils.on([config.$target], ["focus", "click"], SearchSuggestion.showEvent, option);
                 }
                 else if (config.followPosition === "input") {
-                    popsDOMUtils.on([config.$inputTarget], ["focus", "click"], void 0, SearchSuggestion.showEvent, option);
+                    popsDOMUtils.on([config.$inputTarget], ["focus", "click"], SearchSuggestion.showEvent, option);
                 }
                 else if (config.followPosition === "inputCursor") {
                     popsDOMUtils.on([config.$inputTarget], ["focus", "click", "input"], SearchSuggestion.showEvent, option);
@@ -13016,9 +13113,9 @@ const PopsSearchSuggestion = {
              */
             removeShowEvent(option = defaultListenerOption) {
                 /* 焦点|点击事件*/
-                popsDOMUtils.off([config.$target, config.$inputTarget], ["focus", "click"], void 0, SearchSuggestion.showEvent, option);
+                popsDOMUtils.off([config.$target, config.$inputTarget], ["focus", "click"], SearchSuggestion.showEvent, option);
                 // 内容改变事件
-                popsDOMUtils.off([config.$inputTarget], ["input"], void 0, SearchSuggestion.showEvent, option);
+                popsDOMUtils.off([config.$inputTarget], ["input"], SearchSuggestion.showEvent, option);
             },
             /**
              * 隐藏搜索建议框的事件
@@ -13049,7 +13146,7 @@ const PopsSearchSuggestion = {
                 // 全局触摸屏点击事件
                 if (Array.isArray(SearchSuggestion.selfDocument)) {
                     SearchSuggestion.selfDocument.forEach(($checkParent) => {
-                        popsDOMUtils.on($checkParent, ["click", "touchstart"], void 0, SearchSuggestion.hideEvent, option);
+                        popsDOMUtils.on($checkParent, ["click", "touchstart"], SearchSuggestion.hideEvent, option);
                     });
                 }
                 else {
@@ -13062,11 +13159,11 @@ const PopsSearchSuggestion = {
             removeHideEvent(option = defaultListenerOption) {
                 if (Array.isArray(SearchSuggestion.selfDocument)) {
                     SearchSuggestion.selfDocument.forEach(($checkParent) => {
-                        popsDOMUtils.off($checkParent, ["click", "touchstart"], void 0, SearchSuggestion.hideEvent, option);
+                        popsDOMUtils.off($checkParent, ["click", "touchstart"], SearchSuggestion.hideEvent, option);
                     });
                 }
                 else {
-                    popsDOMUtils.off(SearchSuggestion.selfDocument, ["click", "touchstart"], void 0, SearchSuggestion.hideEvent, option);
+                    popsDOMUtils.off(SearchSuggestion.selfDocument, ["click", "touchstart"], SearchSuggestion.hideEvent, option);
                 }
             },
             /**
@@ -13327,7 +13424,7 @@ const PopsSearchSuggestion = {
     },
 };
 
-const version = "3.1.3";
+const version = "3.2.0";
 
 class Pops {
     /** 配置 */