@whitesev/pops 3.1.3 → 3.2.0

package/dist/index.iife.js

@@ -517,7 +517,7 @@ var pops = (function () {
          * @param propName
          */
         delete(target, propName) {
-            if (typeof Reflect === "object" && Reflect.deleteProperty) {
+            if (typeof Reflect === "object" && typeof Reflect.deleteProperty === "function") {
                 Reflect.deleteProperty(target, propName);
             }
             else {
@@ -1023,13 +1023,13 @@ var pops = (function () {
             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)) {
@@ -1080,7 +1080,7 @@ var pops = (function () {
                 // 目标函数、事件名、回调函数、事件配置、过滤函数
                 filter = option;
             }
-            elementList.forEach((elementItem) => {
+            $elList.forEach((elementItem) => {
                 // 获取对象上的事件
                 const elementEvents = Reflect.get(elementItem, SymbolEvents) || {};
                 eventTypeList.forEach((eventName) => {
@@ -1127,18 +1127,19 @@ var pops = (function () {
          * @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)) {
@@ -1147,12 +1148,13 @@ var pops = (function () {
             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];
@@ -1160,11 +1162,12 @@ var pops = (function () {
                             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);
                     });
                 });
             });
@@ -1907,7 +1910,8 @@ var pops = (function () {
             }
             return $el.classList.contains(className);
         }
-        css(element, property, value) {
+        css($el, property, value) {
+            const that = this;
             /**
              * 把纯数字没有px的加上
              */
@@ -1921,10 +1925,33 @@ var pops = (function () {
                 }
                 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) => {
@@ -1933,16 +1960,16 @@ var pops = (function () {
                         .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);
@@ -1954,6 +1981,10 @@ var pops = (function () {
                     setStyleProperty(prop, value);
                 }
             }
+            else {
+                // 其他情况
+                throw new TypeError("property must be string or object");
+            }
         }
         /**
          * 创建元素
@@ -3088,16 +3119,16 @@ var pops = (function () {
         },
         /**
          * 删除配置中对应的对象
-         * @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);
@@ -3106,39 +3137,44 @@ var pops = (function () {
                 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;
         },
         /**
          * 隐藏
@@ -3283,8 +3319,9 @@ var pops = (function () {
          * @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;
                 /**
@@ -3294,12 +3331,12 @@ var pops = (function () {
                     /**
                      * 弹窗已关闭的回调
                      */
-                    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();
                     }
                     // 监听过渡结束
@@ -3331,10 +3368,32 @@ var pops = (function () {
                     }, 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();
+                    }
+                }
+            });
         },
         /**
          * 拖拽元素
@@ -3673,12 +3732,12 @@ var pops = (function () {
                         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);
@@ -3686,7 +3745,7 @@ var pops = (function () {
                 });
                 // 在遮罩层监听点击事件
                 // 如果有动画层，那么该点击事件触发不了
-                popsDOMUtils.on(result.maskElement, "click", void 0, (event) => {
+                popsDOMUtils.on(result.maskElement, "click", (event) => {
                     isMaskClick = true;
                     clickEvent(event);
                 });
@@ -3829,13 +3888,13 @@ var pops = (function () {
          * @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,
@@ -3843,44 +3902,47 @@ var pops = (function () {
                 $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);
                 },
             };
         },
@@ -3993,8 +4055,8 @@ var pops = (function () {
         handleOnly(type, config) {
             if (config.only) {
                 // .loading
-                // .tooltip
                 // .rightClickMenu
+                // .tooltip
                 // 单独处理
                 if (type === "loading" || type === "tooltip" || type === "rightClickMenu") {
                     const inst = PopsInstData[type];
@@ -4006,11 +4068,11 @@ var pops = (function () {
                     PopsInstanceUtils.removeInstance([
                         PopsInstData.alert,
                         PopsInstData.confirm,
-                        PopsInstData.prompt,
-                        PopsInstData.iframe,
                         PopsInstData.drawer,
                         PopsInstData.folder,
+                        PopsInstData.iframe,
                         PopsInstData.panel,
+                        PopsInstData.prompt,
                     ], "", true);
                 }
             }
@@ -4174,6 +4236,7 @@ var pops = (function () {
             }
             // 处理返回的配置
             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按钮添加点击事件
@@ -4196,6 +4259,8 @@ var pops = (function () {
                 $mask: $mask,
                 $shadowContainer: $shadowContainer,
                 $shadowRoot: $shadowRoot,
+                config: config,
+                destory: result.close,
             });
             // 拖拽
             if (config.drag) {
@@ -4207,7 +4272,6 @@ var pops = (function () {
                     endCallBack: config.dragEndCallBack,
                 });
             }
-            const result = PopsHandler.handleResultConfig(evtConfig);
             return result;
         },
     };
@@ -4381,6 +4445,7 @@ var pops = (function () {
                 $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);
@@ -4401,6 +4466,8 @@ var pops = (function () {
                 $mask: $mask,
                 $shadowContainer: $shadowContainer,
                 $shadowRoot: $shadowRoot,
+                config: config,
+                destory: result.close,
             });
             // 拖拽
             if (config.drag) {
@@ -4412,7 +4479,6 @@ var pops = (function () {
                     endCallBack: config.dragEndCallBack,
                 });
             }
-            const result = PopsHandler.handleResultConfig(evtConfig);
             return result;
         },
     };
@@ -4591,6 +4657,7 @@ var pops = (function () {
                 $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
@@ -4686,8 +4753,9 @@ var pops = (function () {
                 $mask: $mask,
                 $shadowContainer: $shadowContainer,
                 $shadowRoot: $shadowRoot,
+                config: config,
+                destory: result.close,
             });
-            const result = PopsHandler.handleResultConfig(evtConfig);
             return result;
         },
     };
@@ -5196,6 +5264,7 @@ var pops = (function () {
             }
             // 事件
             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);
@@ -5775,8 +5844,9 @@ var pops = (function () {
                 $mask: $mask,
                 $shadowContainer: $shadowContainer,
                 $shadowRoot: $shadowRoot,
+                config: config,
+                destory: result.close,
             });
-            const result = PopsHandler.handleResultConfig(evtConfig);
             return result;
         },
     };
@@ -5932,6 +6002,7 @@ var pops = (function () {
             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%";
@@ -6063,10 +6134,10 @@ var pops = (function () {
                 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);
                 }
@@ -6080,8 +6151,9 @@ var pops = (function () {
                 $mask: $mask,
                 $shadowContainer: $shadowContainer,
                 $shadowRoot: $shadowRoot,
+                config: config,
+                destory: result.close,
             });
-            const result = PopsHandler.handleResultConfig(evtConfig);
             return result;
         },
     };
@@ -7047,7 +7119,7 @@ var pops = (function () {
             isFixed: false,
             alwaysShow: false,
             onShowEventName: "mouseenter touchstart",
-            onCloseEventName: "mouseleave touchend",
+            onCloseEventName: "mouseleave touchend touchcancel",
             zIndex: 10000,
             only: false,
             eventOption: {
@@ -7273,12 +7345,12 @@ var pops = (function () {
         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);
@@ -7450,13 +7522,13 @@ var pops = (function () {
          */
         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;
         }
         /**
@@ -7504,29 +7576,29 @@ var pops = (function () {
             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 = {
@@ -7541,6 +7613,15 @@ var pops = (function () {
                 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, [
                 {
@@ -8805,7 +8886,7 @@ var pops = (function () {
                      * 监听输入框内容改变
                      */
                     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") {
                                 // 不是密码框
@@ -9178,7 +9259,7 @@ var pops = (function () {
                          * 监听点击事件
                          */
                         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];
@@ -10945,7 +11026,7 @@ var pops = (function () {
                      * 设置按钮的点击事件
                      */
                     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);
                             }
@@ -11014,13 +11095,13 @@ var pops = (function () {
                     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",
@@ -11040,42 +11121,42 @@ var pops = (function () {
 							`);
                                 // 添加点击事件
                                 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,
                                 });
                             }
@@ -11214,7 +11295,7 @@ var pops = (function () {
                     },
                     /** 设置项的点击事件 */
                     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) {
@@ -11542,6 +11623,7 @@ var pops = (function () {
             }
             // 处理返回的配置
             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);
             // 创建到页面中
@@ -11579,6 +11661,8 @@ var pops = (function () {
                 $mask: $mask,
                 $shadowContainer: $shadowContainer,
                 $shadowRoot: $shadowRoot,
+                config: config,
+                destory: result.close,
             });
             // 拖拽
             if (config.drag) {
@@ -11590,7 +11674,6 @@ var pops = (function () {
                     endCallBack: config.dragEndCallBack,
                 });
             }
-            const result = PopsHandler.handleResultConfig(evtConfig);
             return {
                 ...result,
                 addEventListener: (event, listener, options) => {
@@ -11782,6 +11865,7 @@ var pops = (function () {
                 $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);
@@ -11804,6 +11888,8 @@ var pops = (function () {
                 $mask: $mask,
                 $shadowContainer: $shadowContainer,
                 $shadowRoot: $shadowRoot,
+                config: config,
+                destory: result.close,
             });
             // 拖拽
             if (config.drag) {
@@ -11823,7 +11909,6 @@ var pops = (function () {
             if (config.content.select) {
                 $input.select();
             }
-            const result = PopsHandler.handleResultConfig(evtConfig);
             return result;
         },
     };
@@ -11925,6 +12010,7 @@ var pops = (function () {
             beforeAppendToPageCallBack() { },
             limitPositionXInView: true,
             limitPositionYInView: true,
+            beforeShowCallBack() { },
         };
     };
 
@@ -11984,6 +12070,8 @@ var pops = (function () {
                         return;
                     }
                     if ($click.className && $click.className === "pops-shadow-container" && $click.shadowRoot != null) {
+                        // pops的shadow-container
+                        PopsContextMenu.shadowRootCheckClickEvent(event);
                         return;
                     }
                     PopsContextMenu.closeAllMenu(PopsContextMenu.$el.$root);
@@ -11996,7 +12084,7 @@ var pops = (function () {
                     if (!PopsContextMenu.$el.$root) {
                         return;
                     }
-                    const $click = event.target;
+                    const $click = event.composedPath()[0];
                     if ($click.closest(`.pops-${popsType}`)) {
                         return;
                     }
@@ -12006,13 +12094,13 @@ var pops = (function () {
                  * 添加全局点击检测事件
                  */
                 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,
                             });
                         }
@@ -12022,13 +12110,13 @@ var pops = (function () {
                  * 移除全局点击检测事件
                  */
                 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,
                             });
                         }
@@ -12039,7 +12127,7 @@ var pops = (function () {
                  * @param event
                  * @param selectorTarget
                  */
-                contextMenuEvent(event, selectorTarget) {
+                async contextMenuEvent(event, selectorTarget) {
                     if (config.preventDefault) {
                         popsDOMUtils.preventEvent(event);
                     }
@@ -12048,6 +12136,10 @@ var pops = (function () {
                         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) {
@@ -12060,6 +12152,10 @@ var pops = (function () {
                             beforeRemoveCallBack(instCommonConfig) {
                                 PopsContextMenu.closeAllMenu(instCommonConfig.$pops);
                             },
+                            config: config,
+                            destory: () => {
+                                PopsContextMenu.closeAllMenu(rootElement);
+                            },
                         });
                     }
                 },
@@ -12363,7 +12459,8 @@ var pops = (function () {
                             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`);
@@ -13002,10 +13099,10 @@ var pops = (function () {
                 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);
@@ -13019,9 +13116,9 @@ var pops = (function () {
                  */
                 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);
                 },
                 /**
                  * 隐藏搜索建议框的事件
@@ -13052,7 +13149,7 @@ var pops = (function () {
                     // 全局触摸屏点击事件
                     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 {
@@ -13065,11 +13162,11 @@ var pops = (function () {
                 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);
                     }
                 },
                 /**
@@ -13330,7 +13427,7 @@ var pops = (function () {
         },
     };
 
-    const version = "3.1.3";
+    const version = "3.2.0";
 
     class Pops {
         /** 配置 */