@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.iife.js
CHANGED
|
@@ -964,13 +964,17 @@ var pops = (function () {
|
|
|
964
964
|
}
|
|
965
965
|
/**
|
|
966
966
|
* 实现jQuery中的$().offset();
|
|
967
|
-
* @param
|
|
968
|
-
* @
|
|
967
|
+
* @param element
|
|
968
|
+
* @param calcScroll 计算滚动距离
|
|
969
969
|
*/
|
|
970
|
-
offset(element) {
|
|
970
|
+
offset(element, calcScroll = true) {
|
|
971
971
|
let rect = element.getBoundingClientRect();
|
|
972
972
|
let win = element.ownerDocument.defaultView;
|
|
973
|
-
let resultRect = new DOMRect(
|
|
973
|
+
let resultRect = new DOMRect(calcScroll
|
|
974
|
+
? parseFloat((rect.left + (win?.pageXOffset || 0)).toString())
|
|
975
|
+
: rect.left, calcScroll
|
|
976
|
+
? parseFloat((rect.top + (win?.pageYOffset || 0)).toString())
|
|
977
|
+
: rect.top, rect.width, rect.height);
|
|
974
978
|
return resultRect;
|
|
975
979
|
}
|
|
976
980
|
width(element, isShow = false, parent) {
|
|
@@ -2281,7 +2285,7 @@ var pops = (function () {
|
|
|
2281
2285
|
|
|
2282
2286
|
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";
|
|
2283
2287
|
|
|
2284
|
-
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\
|
|
2288
|
+
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";
|
|
2285
2289
|
|
|
2286
2290
|
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";
|
|
2287
2291
|
|
|
@@ -6630,6 +6634,7 @@ var pops = (function () {
|
|
|
6630
6634
|
zIndex: () => {
|
|
6631
6635
|
return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
|
|
6632
6636
|
},
|
|
6637
|
+
isFixed: true,
|
|
6633
6638
|
className: "github-tooltip",
|
|
6634
6639
|
only: false,
|
|
6635
6640
|
eventOption: {
|
|
@@ -6649,7 +6654,6 @@ var pops = (function () {
|
|
|
6649
6654
|
}
|
|
6650
6655
|
},
|
|
6651
6656
|
alwaysShow: false,
|
|
6652
|
-
// only: false,
|
|
6653
6657
|
position: "top",
|
|
6654
6658
|
arrowDistance: 10,
|
|
6655
6659
|
});
|
|
@@ -9429,6 +9433,7 @@ var pops = (function () {
|
|
|
9429
9433
|
content: "默认文字",
|
|
9430
9434
|
position: "top",
|
|
9431
9435
|
className: "",
|
|
9436
|
+
isFixed: false,
|
|
9432
9437
|
alwaysShow: false,
|
|
9433
9438
|
triggerShowEventName: "mouseenter touchstart",
|
|
9434
9439
|
triggerCloseEventName: "mouseleave touchend",
|
|
@@ -9461,8 +9466,8 @@ var pops = (function () {
|
|
|
9461
9466
|
$data = {
|
|
9462
9467
|
config: null,
|
|
9463
9468
|
guid: null,
|
|
9464
|
-
|
|
9465
|
-
|
|
9469
|
+
timeId_close_TouchEvent: [],
|
|
9470
|
+
timeId_close_MouseEvent: [],
|
|
9466
9471
|
};
|
|
9467
9472
|
constructor(config, guid, ShadowInfo) {
|
|
9468
9473
|
this.$data.config = config;
|
|
@@ -9494,6 +9499,9 @@ var pops = (function () {
|
|
|
9494
9499
|
<div class="pops-tip-content" style="text-align: center;"></div>
|
|
9495
9500
|
<div class="pops-tip-arrow"></div>
|
|
9496
9501
|
`,
|
|
9502
|
+
}, {
|
|
9503
|
+
"data-position": this.$data.config.isFixed ? "fixed" : "absolute",
|
|
9504
|
+
"data-guid": this.$data.guid,
|
|
9497
9505
|
});
|
|
9498
9506
|
/** 内容 */
|
|
9499
9507
|
let $toolTipContent = $toolTipContainer.querySelector(".pops-tip-content");
|
|
@@ -9504,8 +9512,6 @@ var pops = (function () {
|
|
|
9504
9512
|
this.$data.config.className.trim() !== "") {
|
|
9505
9513
|
popsDOMUtils.addClassName($toolTipContainer, this.$data.config.className);
|
|
9506
9514
|
}
|
|
9507
|
-
// 添加attr
|
|
9508
|
-
$toolTipContainer.setAttribute("data-guid", this.$data.guid);
|
|
9509
9515
|
// 添加z-index
|
|
9510
9516
|
$toolTipContainer.style.zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex).toString();
|
|
9511
9517
|
if (this.$data.config.style != null) {
|
|
@@ -9561,12 +9567,17 @@ var pops = (function () {
|
|
|
9561
9567
|
* @param otherDistance 其它位置的偏移
|
|
9562
9568
|
*/
|
|
9563
9569
|
getPosition(targetElement, arrowDistance, otherDistance) {
|
|
9564
|
-
let
|
|
9565
|
-
|
|
9566
|
-
let
|
|
9567
|
-
//
|
|
9568
|
-
let
|
|
9569
|
-
//
|
|
9570
|
+
let offsetInfo = popsDOMUtils.offset(targetElement, !this.$data.config.isFixed);
|
|
9571
|
+
// 目标 宽
|
|
9572
|
+
let targetElement_width = offsetInfo.width;
|
|
9573
|
+
// 目标 高
|
|
9574
|
+
let targetElement_height = offsetInfo.height;
|
|
9575
|
+
// 目标 顶部距离
|
|
9576
|
+
let targetElement_top = offsetInfo.top;
|
|
9577
|
+
// let targetElement_bottom = offsetInfo.bottom;
|
|
9578
|
+
// 目标 左边距离
|
|
9579
|
+
let targetElement_left = offsetInfo.left;
|
|
9580
|
+
// let targetElement_right = offsetInfo.right;
|
|
9570
9581
|
let toolTipElement_width = popsDOMUtils.outerWidth(this.$el.$toolTip);
|
|
9571
9582
|
let toolTipElement_height = popsDOMUtils.outerHeight(this.$el.$toolTip);
|
|
9572
9583
|
/* 目标元素的x轴的中间位置 */
|
|
@@ -9622,39 +9633,56 @@ var pops = (function () {
|
|
|
9622
9633
|
*/
|
|
9623
9634
|
onEvent() {
|
|
9624
9635
|
// 监听动画结束事件
|
|
9625
|
-
this.
|
|
9636
|
+
this.onToolTipAnimationFinishEvent();
|
|
9626
9637
|
this.onShowEvent();
|
|
9627
9638
|
this.onCloseEvent();
|
|
9628
|
-
this.
|
|
9629
|
-
this.
|
|
9639
|
+
this.onToolTipMouseEnterEvent();
|
|
9640
|
+
this.onToolTipMouseLeaveEvent();
|
|
9630
9641
|
}
|
|
9631
9642
|
/**
|
|
9632
9643
|
* 取消事件绑定
|
|
9633
9644
|
*/
|
|
9634
9645
|
offEvent() {
|
|
9635
|
-
this.
|
|
9646
|
+
this.offToolTipAnimationFinishEvent();
|
|
9636
9647
|
this.offShowEvent();
|
|
9637
9648
|
this.offCloseEvent();
|
|
9638
|
-
this.
|
|
9639
|
-
this.
|
|
9649
|
+
this.offToolTipMouseEnterEvent();
|
|
9650
|
+
this.offToolTipMouseLeaveEvent();
|
|
9651
|
+
}
|
|
9652
|
+
/**
|
|
9653
|
+
* 添加关闭的timeId
|
|
9654
|
+
* @param type
|
|
9655
|
+
* @param timeId
|
|
9656
|
+
*/
|
|
9657
|
+
addCloseTimeoutId(type, timeId) {
|
|
9658
|
+
if (type === "MouseEvent") {
|
|
9659
|
+
this.$data.timeId_close_MouseEvent.push(timeId);
|
|
9660
|
+
}
|
|
9661
|
+
else {
|
|
9662
|
+
this.$data.timeId_close_TouchEvent.push(timeId);
|
|
9663
|
+
}
|
|
9640
9664
|
}
|
|
9641
9665
|
/**
|
|
9642
9666
|
* 清除延迟的timeId
|
|
9667
|
+
* @param type 事件类型
|
|
9643
9668
|
*/
|
|
9644
|
-
clearCloseTimeoutId(timeId) {
|
|
9645
|
-
|
|
9646
|
-
|
|
9669
|
+
clearCloseTimeoutId(type, timeId) {
|
|
9670
|
+
let timeIdList = type === "MouseEvent"
|
|
9671
|
+
? this.$data.timeId_close_MouseEvent
|
|
9672
|
+
: this.$data.timeId_close_TouchEvent;
|
|
9673
|
+
for (let index = 0; index < timeIdList.length; index++) {
|
|
9674
|
+
const currentTimeId = timeIdList[index];
|
|
9647
9675
|
if (typeof timeId === "number") {
|
|
9648
9676
|
// 只清除一个
|
|
9649
9677
|
if (timeId == currentTimeId) {
|
|
9650
9678
|
clearTimeout(timeId);
|
|
9651
|
-
|
|
9679
|
+
timeIdList.splice(index, 1);
|
|
9652
9680
|
break;
|
|
9653
9681
|
}
|
|
9654
9682
|
}
|
|
9655
9683
|
else {
|
|
9656
9684
|
clearTimeout(currentTimeId);
|
|
9657
|
-
|
|
9685
|
+
timeIdList.splice(index, 1);
|
|
9658
9686
|
index--;
|
|
9659
9687
|
}
|
|
9660
9688
|
}
|
|
@@ -9662,14 +9690,16 @@ var pops = (function () {
|
|
|
9662
9690
|
/**
|
|
9663
9691
|
* 显示提示框
|
|
9664
9692
|
*/
|
|
9665
|
-
show() {
|
|
9693
|
+
show(...args) {
|
|
9694
|
+
let event = args[0];
|
|
9695
|
+
let eventType = event instanceof MouseEvent ? "MouseEvent" : "TouchEvent";
|
|
9696
|
+
this.clearCloseTimeoutId(eventType);
|
|
9666
9697
|
if (typeof this.$data.config.showBeforeCallBack === "function") {
|
|
9667
9698
|
let result = this.$data.config.showBeforeCallBack(this.$el.$toolTip);
|
|
9668
9699
|
if (typeof result === "boolean" && !result) {
|
|
9669
9700
|
return;
|
|
9670
9701
|
}
|
|
9671
9702
|
}
|
|
9672
|
-
this.clearCloseTimeoutId();
|
|
9673
9703
|
if (!popsUtils.contains(this.$el.$shadowRoot, this.$el.$toolTip)) {
|
|
9674
9704
|
// 不在容器中，添加
|
|
9675
9705
|
this.init();
|
|
@@ -9709,6 +9739,7 @@ var pops = (function () {
|
|
|
9709
9739
|
*/
|
|
9710
9740
|
close(...args) {
|
|
9711
9741
|
let event = args[0];
|
|
9742
|
+
let eventType = event instanceof MouseEvent ? "MouseEvent" : "TouchEvent";
|
|
9712
9743
|
// 只判断鼠标事件
|
|
9713
9744
|
// 其它的如Touch事件不做处理
|
|
9714
9745
|
if (event && event instanceof MouseEvent) {
|
|
@@ -9731,12 +9762,12 @@ var pops = (function () {
|
|
|
9731
9762
|
}
|
|
9732
9763
|
let timeId = setTimeout(() => {
|
|
9733
9764
|
// 设置属性触发关闭动画
|
|
9734
|
-
this.clearCloseTimeoutId(timeId);
|
|
9765
|
+
this.clearCloseTimeoutId(eventType, timeId);
|
|
9735
9766
|
this.$el.$toolTip.setAttribute("data-motion", this.$el.$toolTip
|
|
9736
9767
|
.getAttribute("data-motion")
|
|
9737
9768
|
.replace("fadeIn", "fadeOut"));
|
|
9738
9769
|
}, this.$data.config.delayCloseTime);
|
|
9739
|
-
this
|
|
9770
|
+
this.addCloseTimeoutId(eventType, timeId);
|
|
9740
9771
|
if (typeof this.$data.config.closeAfterCallBack === "function") {
|
|
9741
9772
|
this.$data.config.closeAfterCallBack(this.$el.$toolTip);
|
|
9742
9773
|
}
|
|
@@ -9772,7 +9803,7 @@ var pops = (function () {
|
|
|
9772
9803
|
/**
|
|
9773
9804
|
* 动画结束事件
|
|
9774
9805
|
*/
|
|
9775
|
-
|
|
9806
|
+
toolTipAnimationFinishEvent() {
|
|
9776
9807
|
if (!this.$el.$toolTip) {
|
|
9777
9808
|
return;
|
|
9778
9809
|
}
|
|
@@ -9782,21 +9813,21 @@ var pops = (function () {
|
|
|
9782
9813
|
this.destory();
|
|
9783
9814
|
}
|
|
9784
9815
|
/**
|
|
9785
|
-
*
|
|
9816
|
+
* 监听tooltip的动画结束
|
|
9786
9817
|
*/
|
|
9787
|
-
|
|
9788
|
-
popsDOMUtils.on(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.
|
|
9818
|
+
onToolTipAnimationFinishEvent() {
|
|
9819
|
+
popsDOMUtils.on(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.toolTipAnimationFinishEvent.bind(this));
|
|
9789
9820
|
}
|
|
9790
9821
|
/**
|
|
9791
|
-
*
|
|
9822
|
+
* 取消tooltip监听动画结束
|
|
9792
9823
|
*/
|
|
9793
|
-
|
|
9794
|
-
popsDOMUtils.off(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.
|
|
9824
|
+
offToolTipAnimationFinishEvent() {
|
|
9825
|
+
popsDOMUtils.off(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.toolTipAnimationFinishEvent.bind(this));
|
|
9795
9826
|
}
|
|
9796
9827
|
/**
|
|
9797
9828
|
* 鼠标|触摸进入事件
|
|
9798
9829
|
*/
|
|
9799
|
-
|
|
9830
|
+
toolTipMouseEnterEvent() {
|
|
9800
9831
|
this.$el.$toolTip.style.animationPlayState = "paused";
|
|
9801
9832
|
// if (parseInt(getComputedStyle(toolTipElement)) > 0.5) {
|
|
9802
9833
|
// toolTipElement.style.animationPlayState = "paused";
|
|
@@ -9805,33 +9836,34 @@ var pops = (function () {
|
|
|
9805
9836
|
/**
|
|
9806
9837
|
* 监听鼠标|触摸事件
|
|
9807
9838
|
*/
|
|
9808
|
-
|
|
9809
|
-
this.clearCloseTimeoutId();
|
|
9810
|
-
|
|
9839
|
+
onToolTipMouseEnterEvent() {
|
|
9840
|
+
this.clearCloseTimeoutId("MouseEvent");
|
|
9841
|
+
this.clearCloseTimeoutId("TouchEvent");
|
|
9842
|
+
popsDOMUtils.on(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent.bind(this), this.$data.config.eventOption);
|
|
9811
9843
|
}
|
|
9812
9844
|
/**
|
|
9813
9845
|
* 取消监听鼠标|触摸事件
|
|
9814
9846
|
*/
|
|
9815
|
-
|
|
9816
|
-
popsDOMUtils.off(this.$el.$toolTip, "mouseenter touchstart", this.
|
|
9847
|
+
offToolTipMouseEnterEvent() {
|
|
9848
|
+
popsDOMUtils.off(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent.bind(this), this.$data.config.eventOption);
|
|
9817
9849
|
}
|
|
9818
9850
|
/**
|
|
9819
9851
|
* 鼠标|触摸离开事件
|
|
9820
9852
|
*/
|
|
9821
|
-
|
|
9853
|
+
toolTipMouseLeaveEvent() {
|
|
9822
9854
|
this.$el.$toolTip.style.animationPlayState = "running";
|
|
9823
9855
|
}
|
|
9824
9856
|
/**
|
|
9825
9857
|
* 监听鼠标|触摸离开事件
|
|
9826
9858
|
*/
|
|
9827
|
-
|
|
9828
|
-
popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend", this.
|
|
9859
|
+
onToolTipMouseLeaveEvent() {
|
|
9860
|
+
popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent.bind(this), this.$data.config.eventOption);
|
|
9829
9861
|
}
|
|
9830
9862
|
/**
|
|
9831
9863
|
* 取消监听鼠标|触摸离开事件
|
|
9832
9864
|
*/
|
|
9833
|
-
|
|
9834
|
-
popsDOMUtils.off(this.$el.$toolTip, "mouseleave touchend", this.
|
|
9865
|
+
offToolTipMouseLeaveEvent() {
|
|
9866
|
+
popsDOMUtils.off(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent.bind(this), this.$data.config.eventOption);
|
|
9835
9867
|
}
|
|
9836
9868
|
}
|
|
9837
9869
|
class PopsTooltip {
|