guy 3 years ago
parent
commit
43974296a6
  1. 72
      src/base/layer/layer.popup.js
  2. 8
      src/less/base/view/popupview.less

72
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);
}
},

8
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 {

Loading…
Cancel
Save