如何将 wj-popup 与所有者元素居中
How to center wj-popup with owner element
我想将具有 owner 元素的 wj-popup 居中放置在 owner 的中心。这意味着所有者元素的中心必须是弹出窗口的水平中心。我还没有找到关于此的任何信息(仅关于没有所有者元素的弹出窗口,默认情况下居中)。我该怎么做?
当前版本的 wijmo5 (v5.20162.211) 不允许这样做,但这里有一些解决方法:
http://wijmo.com/topic/how-to-center-wj-popup-with-owner-element-by-its-owner-2/#post-79683.
此外,由于我使用的一些 npm ui 组件和 angular2 也不允许使用此解决方法,因此我不得不捕获鼠标事件并像这样修改函数:
setPopupPosition(event:any, element:any) {
let mouseX = event.clientX;
let popupWidth = element.popup.hostElement.clientWidth;
let popupPosition = mouseX - popupWidth / 2;
element.popup.hostElement.style.left = (popupPosition < 0 ? 0 : popupPosition) + "px";
}
element.popup - 在带有@ViewChild of popup 的弹出组件中声明。
和HTML:
<button(click)="setPopupPosition($event, profileFilterPopover)">ButtonName</button>
<profile-filter-popover #profileFilterPopover [owner]="showProfileFilterButton" [reportId]="reportId"
[cubeId]="cubeId"></profile-filter-popover>
其中 profileFilterPopover 是弹窗的 id
我想将具有 owner 元素的 wj-popup 居中放置在 owner 的中心。这意味着所有者元素的中心必须是弹出窗口的水平中心。我还没有找到关于此的任何信息(仅关于没有所有者元素的弹出窗口,默认情况下居中)。我该怎么做?
当前版本的 wijmo5 (v5.20162.211) 不允许这样做,但这里有一些解决方法: http://wijmo.com/topic/how-to-center-wj-popup-with-owner-element-by-its-owner-2/#post-79683.
此外,由于我使用的一些 npm ui 组件和 angular2 也不允许使用此解决方法,因此我不得不捕获鼠标事件并像这样修改函数:
setPopupPosition(event:any, element:any) {
let mouseX = event.clientX;
let popupWidth = element.popup.hostElement.clientWidth;
let popupPosition = mouseX - popupWidth / 2;
element.popup.hostElement.style.left = (popupPosition < 0 ? 0 : popupPosition) + "px";
}
element.popup - 在带有@ViewChild of popup 的弹出组件中声明。
和HTML:
<button(click)="setPopupPosition($event, profileFilterPopover)">ButtonName</button>
<profile-filter-popover #profileFilterPopover [owner]="showProfileFilterButton" [reportId]="reportId"
[cubeId]="cubeId"></profile-filter-popover>
其中 profileFilterPopover 是弹窗的 id