@whitesev/pops 1.8.6 → 1.8.8

package/dist/index.umd.js

@@ -9464,8 +9464,8 @@
         $data = {
             config: null,
             guid: null,
-            timeId_show: [],
-            timeId_close: [],
+            timeId_close_TouchEvent: [],
+            timeId_close_MouseEvent: [],
         };
         constructor(config, guid, ShadowInfo) {
             this.$data.config = config;
@@ -9483,6 +9483,7 @@
             this.changeZIndex();
             this.changePosition();
             if (!this.$data.config.alwaysShow) {
+                this.offEvent();
                 this.onEvent();
             }
         }
@@ -9637,23 +9638,60 @@
             this.offAnimationFinishEvent();
             this.offShowEvent();
             this.offCloseEvent();
+            this.offMouseEnterEvent();
+            this.offMouseLeaveEvent();
+        }
+        /**
+         * 添加关闭的timeId
+         * @param type
+         * @param timeId
+         */
+        addCloseTimeoutId(type, timeId) {
+            if (type === "MouseEvent") {
+                this.$data.timeId_close_MouseEvent.push(timeId);
+            }
+            else {
+                this.$data.timeId_close_TouchEvent.push(timeId);
+            }
+        }
+        /**
+         * 清除延迟的timeId
+         * @param type 事件类型
+         */
+        clearCloseTimeoutId(type, timeId) {
+            let timeIdList = type === "MouseEvent"
+                ? this.$data.timeId_close_MouseEvent
+                : this.$data.timeId_close_TouchEvent;
+            for (let index = 0; index < timeIdList.length; index++) {
+                const currentTimeId = timeIdList[index];
+                if (typeof timeId === "number") {
+                    // 只清除一个
+                    if (timeId == currentTimeId) {
+                        clearTimeout(timeId);
+                        timeIdList.splice(index, 1);
+                        break;
+                    }
+                }
+                else {
+                    clearTimeout(currentTimeId);
+                    timeIdList.splice(index, 1);
+                    index--;
+                }
+            }
         }
         /**
          * 显示提示框
          */
-        show() {
+        show(...args) {
+            let event = args[0];
+            let eventType = event instanceof MouseEvent ? "MouseEvent" : "TouchEvent";
+            this.clearCloseTimeoutId(eventType);
             if (typeof this.$data.config.showBeforeCallBack === "function") {
                 let result = this.$data.config.showBeforeCallBack(this.$el.$toolTip);
                 if (typeof result === "boolean" && !result) {
                     return;
                 }
             }
-            for (let index = 0; index < this.$data.timeId_close.length; index++) {
-                let timeId = this.$data.timeId_close[index];
-                clearTimeout(timeId);
-                this.$data.timeId_close.splice(index, 1);
-                index--;
-            }
             if (!popsUtils.contains(this.$el.$shadowRoot, this.$el.$toolTip)) {
                 // 不在容器中，添加
                 this.init();
@@ -9693,7 +9731,10 @@
          */
         close(...args) {
             let event = args[0];
-            if (event) {
+            let eventType = event instanceof MouseEvent ? "MouseEvent" : "TouchEvent";
+            // 只判断鼠标事件
+            // 其它的如Touch事件不做处理
+            if (event && event instanceof MouseEvent) {
                 let $target = event.composedPath()[0];
                 // 如果是子元素触发的话，忽视
                 if ($target != this.$data.config.target) {
@@ -9712,11 +9753,13 @@
                 this.$data.config.delayCloseTime = 100;
             }
             let timeId = setTimeout(() => {
+                // 设置属性触发关闭动画
+                this.clearCloseTimeoutId(eventType, timeId);
                 this.$el.$toolTip.setAttribute("data-motion", this.$el.$toolTip
                     .getAttribute("data-motion")
                     .replace("fadeIn", "fadeOut"));
             }, this.$data.config.delayCloseTime);
-            this.$data.timeId_close.push(timeId);
+            this.addCloseTimeoutId(eventType, timeId);
             if (typeof this.$data.config.closeAfterCallBack === "function") {
                 this.$data.config.closeAfterCallBack(this.$el.$toolTip);
             }
@@ -9774,29 +9817,45 @@
             popsDOMUtils.off(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.animationFinishEvent.bind(this));
         }
         /**
-         * 当鼠标|手触摸
+         * 鼠标|触摸进入事件
+         */
+        mouseEnterEvent() {
+            this.$el.$toolTip.style.animationPlayState = "paused";
+            // if (parseInt(getComputedStyle(toolTipElement)) > 0.5) {
+            // toolTipElement.style.animationPlayState = "paused";
+            // }
+        }
+        /**
+         * 监听鼠标|触摸事件
          */
         onMouseEnterEvent() {
-            for (let index = 0; index < this.$data.timeId_close.length; index++) {
-                let timeId = this.$data.timeId_close[index];
-                clearTimeout(timeId);
-                this.$data.timeId_close.splice(index, 1);
-                index--;
-            }
-            popsDOMUtils.on(this.$el.$toolTip, "mouseenter touchstart", () => {
-                this.$el.$toolTip.style.animationPlayState = "paused";
-                // if (parseInt(getComputedStyle(toolTipElement)) > 0.5) {
-                // toolTipElement.style.animationPlayState = "paused";
-                // }
-            }, this.$data.config.eventOption);
+            this.clearCloseTimeoutId("MouseEvent");
+            this.clearCloseTimeoutId("TouchEvent");
+            popsDOMUtils.on(this.$el.$toolTip, "mouseenter touchstart", this.mouseEnterEvent.bind(this), this.$data.config.eventOption);
+        }
+        /**
+         * 取消监听鼠标|触摸事件
+         */
+        offMouseEnterEvent() {
+            popsDOMUtils.off(this.$el.$toolTip, "mouseenter touchstart", this.mouseEnterEvent.bind(this), this.$data.config.eventOption);
+        }
+        /**
+         * 鼠标|触摸离开事件
+         */
+        mouseLeaveEvent() {
+            this.$el.$toolTip.style.animationPlayState = "running";
         }
         /**
-         * 当鼠标|手离开，开始当前动画
+         * 监听鼠标|触摸离开事件
          */
         onMouseLeaveEvent() {
-            popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend", () => {
-                this.$el.$toolTip.style.animationPlayState = "running";
-            }, this.$data.config.eventOption);
+            popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend", this.mouseLeaveEvent.bind(this), this.$data.config.eventOption);
+        }
+        /**
+         * 取消监听鼠标|触摸离开事件
+         */
+        offMouseLeaveEvent() {
+            popsDOMUtils.off(this.$el.$toolTip, "mouseleave touchend", this.mouseLeaveEvent.bind(this), this.$data.config.eventOption);
         }
     }
     class PopsTooltip {