From ddcbdf5147a8ff5d778a022f9a69040fc7d61574 Mon Sep 17 00:00:00 2001 From: windy Date: Wed, 23 Aug 2023 15:41:59 +0800 Subject: [PATCH] =?UTF-8?q?feat(KERNEL-15966):=20=E6=8C=87=E5=AE=9Abody?= =?UTF-8?q?=E6=8C=82=E8=BD=BD=E7=9A=84=E5=BC=B9=E7=AA=97=E6=8C=82=E5=9C=A8?= =?UTF-8?q?=E6=9C=80=E5=A4=96=E5=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fineui/src/base/layer/layer.popover.js | 14 ++++++++------ .../src/core/controller/controller.layer.js | 17 +++++++++++++---- .../src/core/controller/controller.popover.js | 17 ++++++++++++++--- packages/fineui/src/core/utils/dom.js | 16 ++++++++++++++++ 4 files changed, 51 insertions(+), 13 deletions(-) diff --git a/packages/fineui/src/base/layer/layer.popover.js b/packages/fineui/src/base/layer/layer.popover.js index 37b4c3d5c..ea6db3662 100644 --- a/packages/fineui/src/base/layer/layer.popover.js +++ b/packages/fineui/src/base/layer/layer.popover.js @@ -16,6 +16,7 @@ import { } from "@/core"; import { Label, IconButton, Button } from "../single"; import { Resizers } from "../0.base"; +import { getOuterBody } from "@/core/utils/dom"; /** * Popover弹出层， @@ -66,10 +67,11 @@ export class Popover extends Widget { this.startX = 0; this.startY = 0; const size = this._calculateSize(); + const bodyDom = getOuterBody(); this.tracker = new MouseMoveTracker( (deltaX, deltaY) => { - const W = Widget._renderEngine.createElement("body").width(); - const H = Widget._renderEngine.createElement("body").height(); + const W = Widget._renderEngine.createElement(bodyDom).width(); + const H = Widget._renderEngine.createElement(bodyDom).height(); this.startX += deltaX; this.startY += deltaY; this.element.css({ @@ -228,11 +230,11 @@ export class Popover extends Widget { _getSuitableBodyHeight(height) { const { headerHeight, footer, footerHeight, bodyTgap } = this.options; - + const bodyDom = getOuterBody(); return clamp( height, 0, - Widget._renderEngine.createElement("body")[0].clientHeight - + Widget._renderEngine.createElement(bodyDom)[0].clientHeight - headerHeight - (footer ? footerHeight : 0) - bodyTgap @@ -240,11 +242,11 @@ export class Popover extends Widget { } _getSuitableHeight(height) { - return clamp(height, 0, Widget._renderEngine.createElement("body")[0].clientHeight); + return clamp(height, 0, Widget._renderEngine.createElement(getOuterBody())[0].clientHeight); } _getSuitableWidth(width) { - return clamp(width, 0, Widget._renderEngine.createElement("body").width()); + return clamp(width, 0, Widget._renderEngine.createElement(getOuterBody()).width()); } _calculateSize() { diff --git a/packages/fineui/src/core/controller/controller.layer.js b/packages/fineui/src/core/controller/controller.layer.js index 7b3196ef2..9dcac7f83 100644 --- a/packages/fineui/src/core/controller/controller.layer.js +++ b/packages/fineui/src/core/controller/controller.layer.js @@ -8,7 +8,7 @@ import { isNull, isNotNull, each, keys, isWidget, isNotEmptyString, extend, bind import { Widget } from "../4.widget"; import { createWidget } from "../5.inject"; import { zIndex_layer } from "../constant"; -import { DOM } from "../utils"; +import { getPositionRelativeContainingBlockRect, getOuterBody } from "../utils/dom"; export class LayerController extends Controller { constructor(Resizers) { @@ -63,7 +63,7 @@ export class LayerController extends Controller { w = from.element; } if (isNotEmptyString(w)) { - w = Widget._renderEngine.createElement(w); + w = Widget._renderEngine.createElement(w === 'body' ? getOuterBody() : w); } if (this.has(name)) { return this.get(name); @@ -86,7 +86,7 @@ export class LayerController extends Controller { }, context); createWidget({ type: "bi.absolute", - element: op.container || this.options.render, + element: op.container || this.getRender(), items: [ { el: layout, @@ -108,7 +108,7 @@ export class LayerController extends Controller { height: offset.height || (w.outerHeight() - (offset.top || 0) - (offset.bottom || 0)) || "", }; - const { top, left, scaleY, scaleX } = DOM.getPositionRelativeContainingBlockRect(layout.element[0]); + const { top, left, scaleY, scaleX } = getPositionRelativeContainingBlockRect(layout.element[0]); css.top = (css.top - top) / scaleY; css.left = (css.left - left) / scaleX; @@ -164,6 +164,15 @@ export class LayerController extends Controller { return this; } + getRender() { + // 默认挂在body上的都找最外层的body + let render = this.options.render; + if (render === 'body') { + return getOuterBody(); + } + return render; + } + _getLayout(name) { return this.layouts[name]; } diff --git a/packages/fineui/src/core/controller/controller.popover.js b/packages/fineui/src/core/controller/controller.popover.js index b3fa2bbc5..c4b8337b8 100644 --- a/packages/fineui/src/core/controller/controller.popover.js +++ b/packages/fineui/src/core/controller/controller.popover.js @@ -7,6 +7,7 @@ import { isNotNull, each } from "../2.base"; import { Widget } from "../4.widget"; import { createWidget } from "../5.inject"; import { zIndex_popover } from "../constant"; +import { getOuterBody } from "../utils/dom"; export class PopoverController extends Controller { constructor() { @@ -56,8 +57,9 @@ export class PopoverController extends Controller { this.floatContainer[name].visible(); const popover = this.get(name); popover.show && popover.show(); - const W = Widget._renderEngine.createElement(this.options.render).width(), - H = Widget._renderEngine.createElement(this.options.render).height(); + const render = this.getRender(); + const W = Widget._renderEngine.createElement(render).width(), + H = Widget._renderEngine.createElement(render).height(); const w = popover.element.width(), h = popover.element.height(); let left = (W - w) / 2, top = (H - h) / 2; if (left < 0) { @@ -124,7 +126,7 @@ export class PopoverController extends Controller { popover.on(BI.Popover.EVENT_CLOSE, () => this.close(name)); createWidget({ type: "bi.absolute", - element: options.container || this.options.render, + element: options.container || this.getRender(), items: [{ el: this.floatContainer[name], left: 0, @@ -137,6 +139,15 @@ export class PopoverController extends Controller { return this; } + getRender() { + // 默认挂在body上的都找最外层的body + let render = this.options.render; + if (render === 'body') { + return getOuterBody(); + } + return render; + } + get(name) { return this.floatManager[name]; } diff --git a/packages/fineui/src/core/utils/dom.js b/packages/fineui/src/core/utils/dom.js index 552a60d44..a2aaa2d76 100644 --- a/packages/fineui/src/core/utils/dom.js +++ b/packages/fineui/src/core/utils/dom.js @@ -788,3 +788,19 @@ export function getPositionRelativeContainingBlockRect(element) { scaleY: rect.height / positionRelativeElement.offsetHeight, }; } + +/** + * 获取最外层的body + */ +export function getOuterBody() { + // 默认挂在body上的都找最外层的body + let parentWindow = window; + let body = document.body; + try { + while (parentWindow.parent !== parentWindow) { + parentWindow = parentWindow.parent; + } + body = parentWindow.document.body; + } catch (e) {} + return body; +}