From b36f3aeabd1631204a4876c60304796075593515 Mon Sep 17 00:00:00 2001 From: iapyang Date: Mon, 24 Aug 2020 17:24:19 +0800 Subject: [PATCH] =?UTF-8?q?KERNEL-5172=20fix:=20popover=E7=9B=B8=E5=85=B3?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/core/popup/demo.popover.js | 27 +++++- src/base/layer/layer.popover.js | 109 ++++++++++++------------- src/less/base/layer/layer.popover.less | 5 ++ 3 files changed, 85 insertions(+), 56 deletions(-) create mode 100644 src/less/base/layer/layer.popover.less diff --git a/demo/js/core/popup/demo.popover.js b/demo/js/core/popup/demo.popover.js index bb696ea78..2c02e30db 100644 --- a/demo/js/core/popup/demo.popover.js +++ b/demo/js/core/popup/demo.popover.js @@ -8,6 +8,7 @@ Demo.Func = BI.inherit(BI.Widget, { render: function () { var id = BI.UUID(); var body; + return { type: "bi.vertical", vgap: 10, @@ -165,7 +166,31 @@ Demo.Func = BI.inherit(BI.Widget, { } }).open(id); } - }] + }, { + type: "bi.text_button", + height: 30, + text: "弹出一个高度动态的popover层, 此弹出层指定size为small, 但是高度随内容自适应，自适应支持的最大高度为600px", + handler: function() { + var id = "弹出层id1" + BI.Popovers.create(id, { + // String或者是json都行 + header: "弹出层标题", + logic: { + dynamic: true + }, + size: "small", + body: { + type: "bi.vertical", + items: BI.map(BI.range(0, 50), function(idx, v) { + return { + type: "bi.label", + text: "弹出层内容", + }; + }), + }, + }).open(id); + }, + }], }; } }); diff --git a/src/base/layer/layer.popover.js b/src/base/layer/layer.popover.js index f90f8193b..88267698b 100644 --- a/src/base/layer/layer.popover.js +++ b/src/base/layer/layer.popover.js @@ -8,39 +8,35 @@ BI.Popover = BI.inherit(BI.Widget, { SIZE: { SMALL: "small", NORMAL: "normal", - BIG: "big" + BIG: "big", }, }, - _defaultConfig: function () { - return BI.extend(BI.Popover.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-popover bi-card bi-border-radius", - // width: 600, - // height: 500, - size: "normal", // small, normal, big - logic: { - dynamic: false - }, - header: null, - headerHeight: 40, - body: null, - footer: null, - footerHeight: 44, - closable: true // BI-40839 是否显示右上角的关闭按钮 - }); + props: { + baseCls: "bi-popover bi-card bi-border-radius", + size: "normal", // small, normal, big + logic: { + dynamic: false, + }, + header: null, + body: null, + footer: null, + closable: true, // BI-40839 是否显示右上角的关闭按钮 + headerHeight: 40, }, + render: function () { - var self = this, o = this.options; + var self = this; var o = this.options; this.startX = 0; this.startY = 0; this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) { - var size = self._calculateSize(); - var W = BI.Widget._renderEngine.createElement("body").width(), H = BI.Widget._renderEngine.createElement("body").height(); + var W = BI.Widget._renderEngine.createElement("body").width(); + var H = BI.Widget._renderEngine.createElement("body").height(); self.startX += deltaX; self.startY += deltaY; self.element.css({ left: BI.clamp(self.startX, 0, W - self.element.width()) + "px", - top: BI.clamp(self.startY, 0, H - self.element.height()) + "px" + top: BI.clamp(self.startY, 0, H - self.element.height()) + "px", }); // BI-12134 没有什么特别好的方法 BI.Resizers._resize(); @@ -57,21 +53,21 @@ BI.Popover = BI.inherit(BI.Widget, { items: [{ type: "bi.absolute", items: [{ - el: BI.isPlainObject(o.header) ? BI.createWidget(o.header, { - extraCls: "bi-font-bold" + el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, { + extraCls: "bi-font-bold", }) : { type: "bi.label", cls: "bi-font-bold", height: o.headerHeight, text: o.header, title: o.header, - textAlign: "left" + textAlign: "left", }, left: 20, top: 0, right: 0, - bottom: 0 - }] + bottom: 0, + }], }, { el: o.closable ? { type: "bi.icon_button", @@ -79,15 +75,15 @@ BI.Popover = BI.inherit(BI.Widget, { height: o.headerHeight, handler: function () { self.close(); - } + }, } : { - type: "bi.layout" + type: "bi.layout", }, - width: 56 + width: 56, }], - height: o.headerHeight + height: o.headerHeight, }, - height: o.headerHeight + height: o.headerHeight, }, { el: o.logic.dynamic ? { type: "bi.vertical", @@ -99,33 +95,35 @@ BI.Popover = BI.inherit(BI.Widget, { hgap: 20, tgap: 10, items: [{ - el: BI.createWidget(o.body) - }] + el: BI.extend({}, o.body, { + extraCls: "dynamic-height-limit-layout", + }), + }], } : { type: "bi.absolute", items: [{ - el: BI.createWidget(o.body), + el: o.body, left: 20, top: 10, right: 20, - bottom: 0 - }] - } + bottom: 0, + }], + }, }]; if (o.footer) { items.push({ el: { type: "bi.absolute", items: [{ - el: BI.createWidget(o.footer), + el: o.footer, left: 20, top: 0, right: 20, - bottom: 0 + bottom: 0, }], - height: o.footerHeight + height: o.footerHeight, }, - height: o.footerHeight + height: o.footerHeight, }); } @@ -134,18 +132,19 @@ BI.Popover = BI.inherit(BI.Widget, { return BI.extend({ type: o.logic.dynamic ? "bi.vertical" : "bi.vtape", items: items, - width: size.width + width: size.width, }, o.logic.dynamic ? { type: "bi.vertical", - scrolly: false + extraCls: "dynamic-layout", + scrolly: false, } : { type: "bi.vtape", - height: size.height + height: size.height, }); }, mounted: function () { - var self = this, o = this.options; + var self = this; var o = this.options; this.dragger.element.mousedown(function (e) { var pos = self.element.offset(); self.startX = pos.left; @@ -178,9 +177,10 @@ BI.Popover = BI.inherit(BI.Widget, { size.height = 500; } } + return { width: o.width || size.width, - height: o.height || size.height + height: o.height || size.height, }; }, @@ -199,11 +199,10 @@ BI.Popover = BI.inherit(BI.Widget, { }, setZindex: function (zindex) { - this.element.css({"z-index": zindex}); + this.element.css({ "z-index": zindex }); }, - destroyed: function () { - } + destroyed: function () {}, }); BI.shortcut("bi.popover", BI.Popover); @@ -211,12 +210,12 @@ BI.shortcut("bi.popover", BI.Popover); BI.BarPopover = BI.inherit(BI.Popover, { _defaultConfig: function () { return BI.extend(BI.BarPopover.superclass._defaultConfig.apply(this, arguments), { - btns: [BI.i18nText("BI-Basic_Sure"), BI.i18nText("BI-Basic_Cancel")] + btns: [BI.i18nText("BI-Basic_Sure"), BI.i18nText("BI-Basic_Cancel")], }); }, beforeCreate: function () { - var self = this, o = this.options; + var self = this; var o = this.options; o.footer || (o.footer = { type: "bi.right_vertical_adapt", lgap: 10, @@ -228,7 +227,7 @@ BI.BarPopover = BI.inherit(BI.Popover, { handler: function (v) { self.fireEvent(BI.Popover.EVENT_CANCEL, v); self.close(v); - } + }, }, { type: "bi.button", text: this.options.btns[0], @@ -237,10 +236,10 @@ BI.BarPopover = BI.inherit(BI.Popover, { handler: function (v) { self.fireEvent(BI.Popover.EVENT_CONFIRM, v); self.close(v); - } - }] + }, + }], }); - } + }, }); BI.shortcut("bi.bar_popover", BI.BarPopover); diff --git a/src/less/base/layer/layer.popover.less b/src/less/base/layer/layer.popover.less new file mode 100644 index 000000000..e392a1074 --- /dev/null +++ b/src/less/base/layer/layer.popover.less @@ -0,0 +1,5 @@ +.bi-popover { + .dynamic-height-limit-layout { + max-height: 100%; + } +}