From 68d67e13b77a1db715c992a897e7f1441dea3529 Mon Sep 17 00:00:00 2001 From: guy Date: Fri, 11 Feb 2022 16:56:35 +0800 Subject: [PATCH 1/2] update --- src/base/combination/bubble.js | 2 +- src/base/combination/combo.js | 32 ++++++++++++++++---------------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/base/combination/bubble.js b/src/base/combination/bubble.js index 47c067e20..e35fa38ca 100644 --- a/src/base/combination/bubble.js +++ b/src/base/combination/bubble.js @@ -332,7 +332,7 @@ name: "offset", options: { offset: function () { - return [o.adjustXOffset, (o.showArrow ? 9 : 0) + (o.adjustYOffset || o.adjustLength)]; + return [o.adjustXOffset, (o.showArrow ? 9 : 0) + (o.adjustYOffset + o.adjustLength)]; } } }]; diff --git a/src/base/combination/combo.js b/src/base/combination/combo.js index de401bdd6..bdb488e4c 100644 --- a/src/base/combination/combo.js +++ b/src/base/combination/combo.js @@ -213,64 +213,64 @@ switch (o.direction) { case "bottom": case "bottom,right": - p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["bottom", "top", "right", "left"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["bottom", "top", "right", "left"], o.offsetStyle); break; case "top": case "top,right": - p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["top", "bottom", "right", "left"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["top", "bottom", "right", "left"], o.offsetStyle); break; case "left": case "left,bottom": - p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["left", "right", "bottom", "top"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["left", "right", "bottom", "top"], o.offsetStyle); break; case "right": case "right,bottom": - p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "bottom", "top"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "bottom", "top"], o.offsetStyle); break; case "top,left": - p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["top", "bottom", "left", "right"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["top", "bottom", "left", "right"], o.offsetStyle); break; case "bottom,left": - p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["bottom", "top", "left", "right"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["bottom", "top", "left", "right"], o.offsetStyle); break; case "left,top": - p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["left", "right", "top", "bottom"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["left", "right", "top", "bottom"], o.offsetStyle); break; case "right,top": - p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "top", "bottom"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "top", "bottom"], o.offsetStyle); break; case "right,innerRight": - p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "innerRight", "innerLeft", "bottom", "top"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "innerRight", "innerLeft", "bottom", "top"], o.offsetStyle); break; case "right,innerLeft": - p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "innerLeft", "innerRight", "bottom", "top"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "innerLeft", "innerRight", "bottom", "top"], o.offsetStyle); break; case "innerRight": - p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["innerRight", "innerLeft", "right", "left", "bottom", "top"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["innerRight", "innerLeft", "right", "left", "bottom", "top"], o.offsetStyle); break; case "innerLeft": - p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["innerLeft", "innerRight", "left", "right", "bottom", "top"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["innerLeft", "innerRight", "left", "right", "bottom", "top"], o.offsetStyle); break; case "top,custom": case "custom,top": - p = BI.DOM.getTopAdaptPosition(combo, this.popupView, (o.adjustYOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight); + p = BI.DOM.getTopAdaptPosition(combo, this.popupView, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight); p.dir = "top"; break; case "custom,bottom": case "bottom,custom": - p = BI.DOM.getBottomAdaptPosition(combo, this.popupView, (o.adjustYOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight); + p = BI.DOM.getBottomAdaptPosition(combo, this.popupView, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight); p.dir = "bottom"; break; case "left,custom": case "custom,left": - p = BI.DOM.getLeftAdaptPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0)); + p = BI.DOM.getLeftAdaptPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0)); delete p.top; delete p.adaptHeight; p.dir = "left"; break; case "custom,right": case "right,custom": - p = BI.DOM.getRightAdaptPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0)); + p = BI.DOM.getRightAdaptPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0)); delete p.top; delete p.adaptHeight; p.dir = "right"; From 43974296a6a8272e408a738ca0e28ac73a2183f5 Mon Sep 17 00:00:00 2001 From: guy Date: Fri, 11 Feb 2022 17:28:52 +0800 Subject: [PATCH 2/2] update --- src/base/layer/layer.popup.js | 72 ++++++++++++++++++++++++++++--- src/less/base/view/popupview.less | 8 ++-- 2 files changed, 71 insertions(+), 9 deletions(-) diff --git a/src/base/layer/layer.popup.js b/src/base/layer/layer.popup.js index a0d8220f8..55061396f 100644 --- a/src/base/layer/layer.popup.js +++ b/src/base/layer/layer.popup.js @@ -104,6 +104,12 @@ BI.PopupView = BI.inherit(BI.Widget, { cls: "bubble-arrow" }] }); + this.arrowWrapper = BI.createWidget({ + type: "bi.absolute", + items: [{ + el: this.arrow, + }] + }) // 因为三角符号的原因位置变大了，需要占位 this.placeholder = BI.createWidget({ type: "bi.layout" @@ -112,7 +118,9 @@ BI.PopupView = BI.inherit(BI.Widget, { type: "bi.absolute", element: this, items: [{ - el: this.arrow + el: this.arrowWrapper, + left: 0, + top: 0, }, { el: this.placeholder }] @@ -174,8 +182,9 @@ BI.PopupView = BI.inherit(BI.Widget, { }, setDirection: function (direction, position) { - if (this.options.showArrow) { - var style, placeholderStyle; + var o = this.options; + if (o.showArrow) { + var style, wrapperStyle, placeholderStyle; var adjustXOffset = position.adjustXOffset || 0; var adjustYOffset = position.adjustYOffset || 0; var bodyBounds = BI.Widget._renderEngine.createElement("body").bounds(); @@ -204,6 +213,12 @@ BI.PopupView = BI.inherit(BI.Widget, { // 5表示留出一定的空间 left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 6, minLeft, maxLeft) }; + wrapperStyle = { + top: o.tgap + o.vgap, + left: 0, + right: "", + bottom: "", + }; placeholderStyle = { left: 0, right: 0, @@ -217,6 +232,12 @@ BI.PopupView = BI.inherit(BI.Widget, { style = { right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 6, minRight, maxRight) }; + wrapperStyle = { + bottom: o.tgap + o.vgap, + left: "", + right: 0, + top: "", + }; placeholderStyle = { left: 0, right: 0, @@ -231,12 +252,22 @@ BI.PopupView = BI.inherit(BI.Widget, { style = { left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 6, minLeft, maxLeft) }; + wrapperStyle = { + bottom: o.tgap + o.vgap, + left: 0, + right: "", + top: "", + }; + wrapperStyle = { + bottom: o.tgap + o.vgap, + left: 0 + }; placeholderStyle = { left: 0, right: 0, height: this._const.TRIANGLE_LENGTH, top: "", - bottom: -this._const.TRIANGLE_LENGTH + bottom: -this._const.TRIANGLE_LENGTH, }; break; case "top,left": @@ -244,12 +275,18 @@ BI.PopupView = BI.inherit(BI.Widget, { style = { right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 6, minRight, maxRight) }; + wrapperStyle = { + bottom: o.tgap + o.vgap, + right: 0, + left: "", + top: "", + }; placeholderStyle = { left: 0, right: 0, height: this._const.TRIANGLE_LENGTH, top: "", - bottom: -this._const.TRIANGLE_LENGTH + bottom: -this._const.TRIANGLE_LENGTH, }; break; case "left": @@ -258,6 +295,12 @@ BI.PopupView = BI.inherit(BI.Widget, { style = { top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 6, minTop, maxTop) }; + wrapperStyle = { + right: o.tgap + o.vgap, + top: 0, + bottom: "", + left: "", + }; placeholderStyle = { top: 0, bottom: 0, @@ -271,6 +314,12 @@ BI.PopupView = BI.inherit(BI.Widget, { style = { bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 6, minBottom, maxBottom) }; + wrapperStyle = { + right: o.tgap + o.vgap, + bottom: 0, + top: "", + left: "", + }; placeholderStyle = { top: 0, bottom: 0, @@ -285,6 +334,12 @@ BI.PopupView = BI.inherit(BI.Widget, { style = { top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 6, minTop, maxTop) }; + wrapperStyle = { + left: o.tgap + o.vgap, + top: 0, + bottom: "", + right: "", + }; placeholderStyle = { top: 0, bottom: 0, @@ -298,6 +353,12 @@ BI.PopupView = BI.inherit(BI.Widget, { style = { bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 6, minBottom, maxBottom) }; + wrapperStyle = { + left: o.tgap + o.vgap, + bottom: 0, + top: "", + right: "", + }; placeholderStyle = { top: 0, bottom: 0, @@ -317,6 +378,7 @@ BI.PopupView = BI.inherit(BI.Widget, { } this.element.removeClass("left").removeClass("right").removeClass("top").removeClass("bottom").addClass(direction); this.arrow.element.css(style); + this.arrowWrapper.element.css(wrapperStyle); this.placeholder.element.css(placeholderStyle); } }, diff --git a/src/less/base/view/popupview.less b/src/less/base/view/popupview.less index d145e0d3c..b14bb4e35 100644 --- a/src/less/base/view/popupview.less +++ b/src/less/base/view/popupview.less @@ -28,7 +28,7 @@ } .bi-popup-view[data-popper-placement^='top'], .bi-popup-view.top { - > .bi-bubble-arrow { + > div > .bi-bubble-arrow { bottom: -12px; width: 14px; > .bubble-arrow { @@ -38,7 +38,7 @@ } } .bi-popup-view[data-popper-placement^='bottom'], .bi-popup-view.bottom { - > .bi-bubble-arrow { + > div > .bi-bubble-arrow { top: -12px; width: 14px; > .bubble-arrow { @@ -48,7 +48,7 @@ } } .bi-popup-view[data-popper-placement^='left'], .bi-popup-view.left { - > .bi-bubble-arrow { + > div > .bi-bubble-arrow { right: -12px; height: 14px; > .bubble-arrow { @@ -58,7 +58,7 @@ } } .bi-popup-view[data-popper-placement^='right'], .bi-popup-view.right { - > .bi-bubble-arrow { + > div > .bi-bubble-arrow { left: -12px; height: 14px; > .bubble-arrow {