@whitesev/pops 1.8.6 → 1.8.8

package/dist/index.system.js

@@ -9463,8 +9463,8 @@ System.register('pops', [], (function (exports) {
                 $data = {
                     config: null,
                     guid: null,
-                    timeId_show: [],
-                    timeId_close: [],
+                    timeId_close_TouchEvent: [],
+                    timeId_close_MouseEvent: [],
                 };
                 constructor(config, guid, ShadowInfo) {
                     this.$data.config = config;
@@ -9482,6 +9482,7 @@ System.register('pops', [], (function (exports) {
                     this.changeZIndex();
                     this.changePosition();
                     if (!this.$data.config.alwaysShow) {
+                        this.offEvent();
                         this.onEvent();
                     }
                 }
@@ -9636,23 +9637,60 @@ System.register('pops', [], (function (exports) {
                     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();
@@ -9692,7 +9730,10 @@ System.register('pops', [], (function (exports) {
                  */
                 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) {
@@ -9711,11 +9752,13 @@ System.register('pops', [], (function (exports) {
                         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);
                     }
@@ -9773,29 +9816,45 @@ System.register('pops', [], (function (exports) {
                     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 {