@whitesev/pops 1.8.7 → 1.8.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.amd.js +81 -49
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +81 -49
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +81 -49
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +81 -49
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +81 -49
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +81 -49
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/Pops.d.ts +2 -2
- package/dist/types/src/components/tooltip/index.d.ts +24 -15
- package/dist/types/src/components/tooltip/indexType.d.ts +6 -0
- package/dist/types/src/utils/PopsDOMUtils.d.ts +3 -3
- package/package.json +1 -1
- package/src/Pops.ts +1 -1
- package/src/components/panel/PanelHandleContentDetails.ts +1 -1
- package/src/components/tooltip/config.ts +1 -1
- package/src/components/tooltip/index.css +6 -1
- package/src/components/tooltip/index.ts +86 -47
- package/src/components/tooltip/indexType.ts +6 -0
- package/src/utils/PopsDOMUtils.ts +9 -5
package/dist/index.amd.js
CHANGED
|
@@ -963,13 +963,17 @@ define((function () { 'use strict';
|
|
|
963
963
|
}
|
|
964
964
|
/**
|
|
965
965
|
* 实现jQuery中的$().offset();
|
|
966
|
-
* @param
|
|
967
|
-
* @
|
|
966
|
+
* @param element
|
|
967
|
+
* @param calcScroll 计算滚动距离
|
|
968
968
|
*/
|
|
969
|
-
offset(element) {
|
|
969
|
+
offset(element, calcScroll = true) {
|
|
970
970
|
let rect = element.getBoundingClientRect();
|
|
971
971
|
let win = element.ownerDocument.defaultView;
|
|
972
|
-
let resultRect = new DOMRect(
|
|
972
|
+
let resultRect = new DOMRect(calcScroll
|
|
973
|
+
? parseFloat((rect.left + (win?.pageXOffset || 0)).toString())
|
|
974
|
+
: rect.left, calcScroll
|
|
975
|
+
? parseFloat((rect.top + (win?.pageYOffset || 0)).toString())
|
|
976
|
+
: rect.top, rect.width, rect.height);
|
|
973
977
|
return resultRect;
|
|
974
978
|
}
|
|
975
979
|
width(element, isShow = false, parent) {
|
|
@@ -2280,7 +2284,7 @@ define((function () { 'use strict';
|
|
|
2280
2284
|
|
|
2281
2285
|
var iframeCSS = ".pops[type-value=\"iframe\"] {\r\n\t--container-title-height: 55px;\r\n\ttransition: width 0.35s ease, height 0.35s ease;\r\n}\r\n.pops[type-value] .pops-iframe-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-title {\r\n\twidth: calc(100% - 0px);\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-content {\r\n\twidth: 100%;\r\n\t/*height: calc(100% - var(--container-title-height));*/\r\n\tflex: 1;\r\n\toverflow: hidden;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-content p[pops] {\r\n\tpadding: 5px 10px;\r\n\tcolor: #333;\r\n\ttext-indent: 15px;\r\n}\r\n.pops-loading {\r\n\tposition: absolute;\r\n\ttop: 40px;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tz-index: 5;\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-loading:before {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\tz-index: 3;\r\n\tdisplay: block;\r\n\tmargin: -20px 0 0 -20px;\r\n\tpadding: 20px;\r\n\tborder: 4px solid rgb(221, 221, 221, var(--pops-bd-opacity));\r\n\tborder-radius: 50%;\r\n\tcontent: \"\";\r\n\tborder-top-color: transparent;\r\n\tanimation: pops-anim-wait-rotate 1.2s linear infinite;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"] {\r\n\tbottom: 0;\r\n\tmax-width: 200px;\r\n\tmax-height: 53px;\r\n\tposition: unset;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"]\r\n\t.pops-header-control[type=\"min\"] {\r\n\tdisplay: none;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-top {\r\n\ttop: unset !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-left {\r\n\tleft: unset !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-transform {\r\n\ttransform: none !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-transition {\r\n\ttransition: none !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"max\"] {\r\n\twidth: 100% !important;\r\n\theight: 100% !important;\r\n}\r\n.pops[type-value=\"iframe\"] iframe[pops] {\r\n\twidth: calc(100% - 4px);\r\n\theight: calc(100% - 4px);\r\n\tborder: 0;\r\n}\r\n.pops-iframe-content-global-loading {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\tz-index: 999999;\r\n\twidth: 0;\r\n\theight: 4px;\r\n\tbackground: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n\tanimation: iframeLoadingChange 2s forwards;\r\n}\r\n\r\n.pops-anim:has(.pops[type-value=\"iframe\"].pops[type-module=\"min\"]) {\r\n\tposition: unset;\r\n}\r\n";
|
|
2282
2286
|
|
|
2283
|
-
var tooltipCSS = ".pops-tip {\r\n\t--tooltip-color: #4e4e4e;\r\n\t--tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--tooltip-bd-radius: 2px;\r\n\t--tooltip-font-size: 14px;\r\n\t--tooltip-padding-top: 13px;\r\n\t--tooltip-padding-right: 13px;\r\n\t--tooltip-padding-bottom: 13px;\r\n\t--tooltip-padding-left: 13px;\r\n\r\n\t--tooltip-arrow--after-color: rgb(78, 78, 78);\r\n\t--tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--tooltip-arrow--after-width: 12px;\r\n\t--tooltip-arrow--after-height: 12px;\r\n\r\n\
|
|
2287
|
+
var tooltipCSS = ".pops-tip {\r\n\t--tooltip-color: #4e4e4e;\r\n\t--tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--tooltip-bd-radius: 2px;\r\n\t--tooltip-font-size: 14px;\r\n\t--tooltip-padding-top: 13px;\r\n\t--tooltip-padding-right: 13px;\r\n\t--tooltip-padding-bottom: 13px;\r\n\t--tooltip-padding-left: 13px;\r\n\r\n\t--tooltip-arrow--after-color: rgb(78, 78, 78);\r\n\t--tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--tooltip-arrow--after-width: 12px;\r\n\t--tooltip-arrow--after-height: 12px;\r\n\r\n\tpadding: var(--tooltip-padding-top) var(--tooltip-padding-right)\r\n\t\tvar(--tooltip-padding-bottom) var(--tooltip-padding-left);\r\n\tmax-width: 400px;\r\n\tmax-height: 300px;\r\n\tborder-radius: var(--tooltip-bd-radius);\r\n\tbackground-color: var(--tooltip-bg-color);\r\n\tbox-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);\r\n\tcolor: var(--tooltip-color);\r\n\tfont-size: var(--tooltip-font-size);\r\n}\r\n.pops-tip[data-position=\"absolute\"] {\r\n\tposition: absolute;\r\n}\r\n.pops-tip[data-position=\"fixed\"] {\r\n\tposition: fixed;\r\n}\r\n/* github的样式 */\r\n.pops-tip.github-tooltip {\r\n\t--tooltip-bg-opacity: 1;\r\n\t--tooltip-color: rgb(255, 255, 255);\r\n\t--tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\r\n\t--tooltip-bd-radius: 6px;\r\n\t--tooltip-padding-top: 6px;\r\n\t--tooltip-padding-right: 8px;\r\n\t--tooltip-padding-bottom: 6px;\r\n\t--tooltip-padding-left: 8px;\r\n\r\n\t--tooltip-arrow--after-color: rgb(255, 255, 255);\r\n\t--tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\r\n\t--tooltip-arrow--after-width: 8px;\r\n\t--tooltip-arrow--after-height: 8px;\r\n}\r\n.pops-tip .pops-tip-arrow {\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\toverflow: hidden;\r\n\twidth: 100%;\r\n\theight: 12.5px;\r\n\ttransform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow::after {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 50%;\r\n\twidth: var(--tooltip-arrow--after-width);\r\n\theight: var(--tooltip-arrow--after-height);\r\n\tbackground: var(--tooltip-arrow--after-bg-color);\r\n\tcolor: var(--tooltip-arrow--after-color);\r\n\tbox-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);\r\n\tcontent: \"\";\r\n\ttransform: translateX(-50%) translateY(-50%) rotate(45deg);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"] {\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\toverflow: hidden;\r\n\twidth: 100%;\r\n\theight: 12.5px;\r\n\ttransform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"]:after {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 50%;\r\n\twidth: var(--tooltip-arrow--after-width);\r\n\theight: var(--tooltip-arrow--after-height);\r\n\tbackground: var(--tooltip-arrow--after-bg-color);\r\n\tbox-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);\r\n\tcontent: \"\";\r\n\ttransform: translateX(-50%) translateY(-50%) rotate(45deg);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"left\"] {\r\n\ttop: 50%;\r\n\tleft: -12.5px;\r\n\twidth: 12.5px;\r\n\theight: 50px;\r\n\ttransform: translateY(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"left\"]:after {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 100%;\r\n\tcontent: \"\";\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"right\"] {\r\n\ttop: 50%;\r\n\tright: -12.5px;\r\n\tleft: auto;\r\n\twidth: 12.5px;\r\n\theight: 50px;\r\n\ttransform: translateY(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"right\"]:after {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 0;\r\n\tcontent: \"\";\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"top\"] {\r\n\ttop: -12.5px;\r\n\tleft: 50%;\r\n\ttransform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"top\"]:after {\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\tcontent: \"\";\r\n}\r\n\r\n.pops-tip[data-motion] {\r\n\t-webkit-animation-duration: 0.25s;\r\n\tanimation-duration: 0.25s;\r\n\t-webkit-animation-fill-mode: forwards;\r\n\tanimation-fill-mode: forwards;\r\n}\r\n.pops-tip[data-motion=\"fadeOutRight\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutRight;\r\n\tanimation-name: pops-motion-fadeOutRight;\r\n}\r\n.pops-tip[data-motion=\"fadeInTop\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInTop;\r\n\tanimation-name: pops-motion-fadeInTop;\r\n\tanimation-timing-function: cubic-bezier(0.49, 0.49, 0.13, 1.3);\r\n}\r\n.pops-tip[data-motion=\"fadeOutTop\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutTop;\r\n\tanimation-name: pops-motion-fadeOutTop;\r\n\tanimation-timing-function: cubic-bezier(0.32, 0.37, 0.06, 0.87);\r\n}\r\n.pops-tip[data-motion=\"fadeInBottom\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInBottom;\r\n\tanimation-name: pops-motion-fadeInBottom;\r\n}\r\n.pops-tip[data-motion=\"fadeOutBottom\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutBottom;\r\n\tanimation-name: pops-motion-fadeOutBottom;\r\n}\r\n.pops-tip[data-motion=\"fadeInLeft\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInLeft;\r\n\tanimation-name: pops-motion-fadeInLeft;\r\n}\r\n.pops-tip[data-motion=\"fadeOutLeft\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutLeft;\r\n\tanimation-name: pops-motion-fadeOutLeft;\r\n}\r\n.pops-tip[data-motion=\"fadeInRight\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInRight;\r\n\tanimation-name: pops-motion-fadeInRight;\r\n}\r\n";
|
|
2284
2288
|
|
|
2285
2289
|
var drawerCSS = ".pops[type-value=\"drawer\"] {\r\n\tposition: fixed;\r\n\tbox-sizing: border-box;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tbox-shadow: 0px 16px 48px 16px rgba(0, 0, 0, 0.08),\r\n\t\t0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);\r\n\toverflow: hidden;\r\n\ttransition: all 0.3s;\r\n}\r\n.pops[type-value] .pops-drawer-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value] .pops-drawer-title p[pops] {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n\r\n.pops-drawer-content {\r\n\tflex: 1;\r\n\toverflow: auto;\r\n}\r\n.pops[type-value=\"drawer\"] .pops-drawer-btn {\r\n\tpadding-top: 10px;\r\n\tpadding-bottom: 10px;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"top\"] {\r\n\twidth: 100%;\r\n\tleft: 0;\r\n\tright: 0;\r\n\ttop: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"bottom\"] {\r\n\twidth: 100%;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"left\"] {\r\n\theight: 100%;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"right\"] {\r\n\theight: 100%;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tright: 0;\r\n}\r\n";
|
|
2286
2290
|
|
|
@@ -6629,6 +6633,7 @@ define((function () { 'use strict';
|
|
|
6629
6633
|
zIndex: () => {
|
|
6630
6634
|
return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
|
|
6631
6635
|
},
|
|
6636
|
+
isFixed: true,
|
|
6632
6637
|
className: "github-tooltip",
|
|
6633
6638
|
only: false,
|
|
6634
6639
|
eventOption: {
|
|
@@ -6648,7 +6653,6 @@ define((function () { 'use strict';
|
|
|
6648
6653
|
}
|
|
6649
6654
|
},
|
|
6650
6655
|
alwaysShow: false,
|
|
6651
|
-
// only: false,
|
|
6652
6656
|
position: "top",
|
|
6653
6657
|
arrowDistance: 10,
|
|
6654
6658
|
});
|
|
@@ -9428,6 +9432,7 @@ define((function () { 'use strict';
|
|
|
9428
9432
|
content: "默认文字",
|
|
9429
9433
|
position: "top",
|
|
9430
9434
|
className: "",
|
|
9435
|
+
isFixed: false,
|
|
9431
9436
|
alwaysShow: false,
|
|
9432
9437
|
triggerShowEventName: "mouseenter touchstart",
|
|
9433
9438
|
triggerCloseEventName: "mouseleave touchend",
|
|
@@ -9460,8 +9465,8 @@ define((function () { 'use strict';
|
|
|
9460
9465
|
$data = {
|
|
9461
9466
|
config: null,
|
|
9462
9467
|
guid: null,
|
|
9463
|
-
|
|
9464
|
-
|
|
9468
|
+
timeId_close_TouchEvent: [],
|
|
9469
|
+
timeId_close_MouseEvent: [],
|
|
9465
9470
|
};
|
|
9466
9471
|
constructor(config, guid, ShadowInfo) {
|
|
9467
9472
|
this.$data.config = config;
|
|
@@ -9493,6 +9498,9 @@ define((function () { 'use strict';
|
|
|
9493
9498
|
<div class="pops-tip-content" style="text-align: center;"></div>
|
|
9494
9499
|
<div class="pops-tip-arrow"></div>
|
|
9495
9500
|
`,
|
|
9501
|
+
}, {
|
|
9502
|
+
"data-position": this.$data.config.isFixed ? "fixed" : "absolute",
|
|
9503
|
+
"data-guid": this.$data.guid,
|
|
9496
9504
|
});
|
|
9497
9505
|
/** 内容 */
|
|
9498
9506
|
let $toolTipContent = $toolTipContainer.querySelector(".pops-tip-content");
|
|
@@ -9503,8 +9511,6 @@ define((function () { 'use strict';
|
|
|
9503
9511
|
this.$data.config.className.trim() !== "") {
|
|
9504
9512
|
popsDOMUtils.addClassName($toolTipContainer, this.$data.config.className);
|
|
9505
9513
|
}
|
|
9506
|
-
// 添加attr
|
|
9507
|
-
$toolTipContainer.setAttribute("data-guid", this.$data.guid);
|
|
9508
9514
|
// 添加z-index
|
|
9509
9515
|
$toolTipContainer.style.zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex).toString();
|
|
9510
9516
|
if (this.$data.config.style != null) {
|
|
@@ -9560,12 +9566,17 @@ define((function () { 'use strict';
|
|
|
9560
9566
|
* @param otherDistance 其它位置的偏移
|
|
9561
9567
|
*/
|
|
9562
9568
|
getPosition(targetElement, arrowDistance, otherDistance) {
|
|
9563
|
-
let
|
|
9564
|
-
|
|
9565
|
-
let
|
|
9566
|
-
//
|
|
9567
|
-
let
|
|
9568
|
-
//
|
|
9569
|
+
let offsetInfo = popsDOMUtils.offset(targetElement, !this.$data.config.isFixed);
|
|
9570
|
+
// 目标 宽
|
|
9571
|
+
let targetElement_width = offsetInfo.width;
|
|
9572
|
+
// 目标 高
|
|
9573
|
+
let targetElement_height = offsetInfo.height;
|
|
9574
|
+
// 目标 顶部距离
|
|
9575
|
+
let targetElement_top = offsetInfo.top;
|
|
9576
|
+
// let targetElement_bottom = offsetInfo.bottom;
|
|
9577
|
+
// 目标 左边距离
|
|
9578
|
+
let targetElement_left = offsetInfo.left;
|
|
9579
|
+
// let targetElement_right = offsetInfo.right;
|
|
9569
9580
|
let toolTipElement_width = popsDOMUtils.outerWidth(this.$el.$toolTip);
|
|
9570
9581
|
let toolTipElement_height = popsDOMUtils.outerHeight(this.$el.$toolTip);
|
|
9571
9582
|
/* 目标元素的x轴的中间位置 */
|
|
@@ -9621,39 +9632,56 @@ define((function () { 'use strict';
|
|
|
9621
9632
|
*/
|
|
9622
9633
|
onEvent() {
|
|
9623
9634
|
// 监听动画结束事件
|
|
9624
|
-
this.
|
|
9635
|
+
this.onToolTipAnimationFinishEvent();
|
|
9625
9636
|
this.onShowEvent();
|
|
9626
9637
|
this.onCloseEvent();
|
|
9627
|
-
this.
|
|
9628
|
-
this.
|
|
9638
|
+
this.onToolTipMouseEnterEvent();
|
|
9639
|
+
this.onToolTipMouseLeaveEvent();
|
|
9629
9640
|
}
|
|
9630
9641
|
/**
|
|
9631
9642
|
* 取消事件绑定
|
|
9632
9643
|
*/
|
|
9633
9644
|
offEvent() {
|
|
9634
|
-
this.
|
|
9645
|
+
this.offToolTipAnimationFinishEvent();
|
|
9635
9646
|
this.offShowEvent();
|
|
9636
9647
|
this.offCloseEvent();
|
|
9637
|
-
this.
|
|
9638
|
-
this.
|
|
9648
|
+
this.offToolTipMouseEnterEvent();
|
|
9649
|
+
this.offToolTipMouseLeaveEvent();
|
|
9650
|
+
}
|
|
9651
|
+
/**
|
|
9652
|
+
* 添加关闭的timeId
|
|
9653
|
+
* @param type
|
|
9654
|
+
* @param timeId
|
|
9655
|
+
*/
|
|
9656
|
+
addCloseTimeoutId(type, timeId) {
|
|
9657
|
+
if (type === "MouseEvent") {
|
|
9658
|
+
this.$data.timeId_close_MouseEvent.push(timeId);
|
|
9659
|
+
}
|
|
9660
|
+
else {
|
|
9661
|
+
this.$data.timeId_close_TouchEvent.push(timeId);
|
|
9662
|
+
}
|
|
9639
9663
|
}
|
|
9640
9664
|
/**
|
|
9641
9665
|
* 清除延迟的timeId
|
|
9666
|
+
* @param type 事件类型
|
|
9642
9667
|
*/
|
|
9643
|
-
clearCloseTimeoutId(timeId) {
|
|
9644
|
-
|
|
9645
|
-
|
|
9668
|
+
clearCloseTimeoutId(type, timeId) {
|
|
9669
|
+
let timeIdList = type === "MouseEvent"
|
|
9670
|
+
? this.$data.timeId_close_MouseEvent
|
|
9671
|
+
: this.$data.timeId_close_TouchEvent;
|
|
9672
|
+
for (let index = 0; index < timeIdList.length; index++) {
|
|
9673
|
+
const currentTimeId = timeIdList[index];
|
|
9646
9674
|
if (typeof timeId === "number") {
|
|
9647
9675
|
// 只清除一个
|
|
9648
9676
|
if (timeId == currentTimeId) {
|
|
9649
9677
|
clearTimeout(timeId);
|
|
9650
|
-
|
|
9678
|
+
timeIdList.splice(index, 1);
|
|
9651
9679
|
break;
|
|
9652
9680
|
}
|
|
9653
9681
|
}
|
|
9654
9682
|
else {
|
|
9655
9683
|
clearTimeout(currentTimeId);
|
|
9656
|
-
|
|
9684
|
+
timeIdList.splice(index, 1);
|
|
9657
9685
|
index--;
|
|
9658
9686
|
}
|
|
9659
9687
|
}
|
|
@@ -9661,14 +9689,16 @@ define((function () { 'use strict';
|
|
|
9661
9689
|
/**
|
|
9662
9690
|
* 显示提示框
|
|
9663
9691
|
*/
|
|
9664
|
-
show() {
|
|
9692
|
+
show(...args) {
|
|
9693
|
+
let event = args[0];
|
|
9694
|
+
let eventType = event instanceof MouseEvent ? "MouseEvent" : "TouchEvent";
|
|
9695
|
+
this.clearCloseTimeoutId(eventType);
|
|
9665
9696
|
if (typeof this.$data.config.showBeforeCallBack === "function") {
|
|
9666
9697
|
let result = this.$data.config.showBeforeCallBack(this.$el.$toolTip);
|
|
9667
9698
|
if (typeof result === "boolean" && !result) {
|
|
9668
9699
|
return;
|
|
9669
9700
|
}
|
|
9670
9701
|
}
|
|
9671
|
-
this.clearCloseTimeoutId();
|
|
9672
9702
|
if (!popsUtils.contains(this.$el.$shadowRoot, this.$el.$toolTip)) {
|
|
9673
9703
|
// 不在容器中，添加
|
|
9674
9704
|
this.init();
|
|
@@ -9708,6 +9738,7 @@ define((function () { 'use strict';
|
|
|
9708
9738
|
*/
|
|
9709
9739
|
close(...args) {
|
|
9710
9740
|
let event = args[0];
|
|
9741
|
+
let eventType = event instanceof MouseEvent ? "MouseEvent" : "TouchEvent";
|
|
9711
9742
|
// 只判断鼠标事件
|
|
9712
9743
|
// 其它的如Touch事件不做处理
|
|
9713
9744
|
if (event && event instanceof MouseEvent) {
|
|
@@ -9730,12 +9761,12 @@ define((function () { 'use strict';
|
|
|
9730
9761
|
}
|
|
9731
9762
|
let timeId = setTimeout(() => {
|
|
9732
9763
|
// 设置属性触发关闭动画
|
|
9733
|
-
this.clearCloseTimeoutId(timeId);
|
|
9764
|
+
this.clearCloseTimeoutId(eventType, timeId);
|
|
9734
9765
|
this.$el.$toolTip.setAttribute("data-motion", this.$el.$toolTip
|
|
9735
9766
|
.getAttribute("data-motion")
|
|
9736
9767
|
.replace("fadeIn", "fadeOut"));
|
|
9737
9768
|
}, this.$data.config.delayCloseTime);
|
|
9738
|
-
this
|
|
9769
|
+
this.addCloseTimeoutId(eventType, timeId);
|
|
9739
9770
|
if (typeof this.$data.config.closeAfterCallBack === "function") {
|
|
9740
9771
|
this.$data.config.closeAfterCallBack(this.$el.$toolTip);
|
|
9741
9772
|
}
|
|
@@ -9771,7 +9802,7 @@ define((function () { 'use strict';
|
|
|
9771
9802
|
/**
|
|
9772
9803
|
* 动画结束事件
|
|
9773
9804
|
*/
|
|
9774
|
-
|
|
9805
|
+
toolTipAnimationFinishEvent() {
|
|
9775
9806
|
if (!this.$el.$toolTip) {
|
|
9776
9807
|
return;
|
|
9777
9808
|
}
|
|
@@ -9781,21 +9812,21 @@ define((function () { 'use strict';
|
|
|
9781
9812
|
this.destory();
|
|
9782
9813
|
}
|
|
9783
9814
|
/**
|
|
9784
|
-
*
|
|
9815
|
+
* 监听tooltip的动画结束
|
|
9785
9816
|
*/
|
|
9786
|
-
|
|
9787
|
-
popsDOMUtils.on(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.
|
|
9817
|
+
onToolTipAnimationFinishEvent() {
|
|
9818
|
+
popsDOMUtils.on(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.toolTipAnimationFinishEvent.bind(this));
|
|
9788
9819
|
}
|
|
9789
9820
|
/**
|
|
9790
|
-
*
|
|
9821
|
+
* 取消tooltip监听动画结束
|
|
9791
9822
|
*/
|
|
9792
|
-
|
|
9793
|
-
popsDOMUtils.off(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.
|
|
9823
|
+
offToolTipAnimationFinishEvent() {
|
|
9824
|
+
popsDOMUtils.off(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.toolTipAnimationFinishEvent.bind(this));
|
|
9794
9825
|
}
|
|
9795
9826
|
/**
|
|
9796
9827
|
* 鼠标|触摸进入事件
|
|
9797
9828
|
*/
|
|
9798
|
-
|
|
9829
|
+
toolTipMouseEnterEvent() {
|
|
9799
9830
|
this.$el.$toolTip.style.animationPlayState = "paused";
|
|
9800
9831
|
// if (parseInt(getComputedStyle(toolTipElement)) > 0.5) {
|
|
9801
9832
|
// toolTipElement.style.animationPlayState = "paused";
|
|
@@ -9804,33 +9835,34 @@ define((function () { 'use strict';
|
|
|
9804
9835
|
/**
|
|
9805
9836
|
* 监听鼠标|触摸事件
|
|
9806
9837
|
*/
|
|
9807
|
-
|
|
9808
|
-
this.clearCloseTimeoutId();
|
|
9809
|
-
|
|
9838
|
+
onToolTipMouseEnterEvent() {
|
|
9839
|
+
this.clearCloseTimeoutId("MouseEvent");
|
|
9840
|
+
this.clearCloseTimeoutId("TouchEvent");
|
|
9841
|
+
popsDOMUtils.on(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent.bind(this), this.$data.config.eventOption);
|
|
9810
9842
|
}
|
|
9811
9843
|
/**
|
|
9812
9844
|
* 取消监听鼠标|触摸事件
|
|
9813
9845
|
*/
|
|
9814
|
-
|
|
9815
|
-
popsDOMUtils.off(this.$el.$toolTip, "mouseenter touchstart", this.
|
|
9846
|
+
offToolTipMouseEnterEvent() {
|
|
9847
|
+
popsDOMUtils.off(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent.bind(this), this.$data.config.eventOption);
|
|
9816
9848
|
}
|
|
9817
9849
|
/**
|
|
9818
9850
|
* 鼠标|触摸离开事件
|
|
9819
9851
|
*/
|
|
9820
|
-
|
|
9852
|
+
toolTipMouseLeaveEvent() {
|
|
9821
9853
|
this.$el.$toolTip.style.animationPlayState = "running";
|
|
9822
9854
|
}
|
|
9823
9855
|
/**
|
|
9824
9856
|
* 监听鼠标|触摸离开事件
|
|
9825
9857
|
*/
|
|
9826
|
-
|
|
9827
|
-
popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend", this.
|
|
9858
|
+
onToolTipMouseLeaveEvent() {
|
|
9859
|
+
popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent.bind(this), this.$data.config.eventOption);
|
|
9828
9860
|
}
|
|
9829
9861
|
/**
|
|
9830
9862
|
* 取消监听鼠标|触摸离开事件
|
|
9831
9863
|
*/
|
|
9832
|
-
|
|
9833
|
-
popsDOMUtils.off(this.$el.$toolTip, "mouseleave touchend", this.
|
|
9864
|
+
offToolTipMouseLeaveEvent() {
|
|
9865
|
+
popsDOMUtils.off(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent.bind(this), this.$data.config.eventOption);
|
|
9834
9866
|
}
|
|
9835
9867
|
}
|
|
9836
9868
|
class PopsTooltip {
|