我已经做出了扩展MatTrigger Class的指令,以便在右键单击时打开Mat菜单。它功能正常,但这是我的问题。 我正在打开的小部件菜单很长(整个视口都溢出)。小部件仅在方形休息区可见,所有小部件都溢出。因此,右键单击行中任意位置即可打开菜单。但是,菜单在表行的开始或当我水平滚动一点然后在小部件的末尾(附加的屏幕截图)时打开。
我想在单击鼠标的位置打开该菜单。
感谢您的帮助。 谢谢
我的指令
import { Directive, Input, OnInit, ElementRef, HostListener } from '@angular/core';
import { MatMenuTrigger, MatMenuPanel } from '@angular/material';
@Directive({
selector: '[appRightMenuClick]',
host: {
'aria-haspopup': 'true',
'(click)': '_handleClick(event)',
'(contextmenu)': 'handleContext(event)
′
,
′
(contextmenu)
′
:
′
handleContext(event)',
}
})
export class RightMenuClickDirective extends MatMenuTrigger {
@Input('appRightMenuClick')
get _menuFor(): MatMenuPanel {
return this.menu;
}
set _menuFor(v: MatMenuPanel) {
this.menu = v;
}
_handleClick(e) {
// left click
}
handleContext(e) {
this.menu.xPosition = 'before';
e.preventDefault(); // prevents the browsers context menu
super._handleClick(e);
// Some of My tries
// const menu = document.getElementsByClassName('mat-menu-panel')[0];
// menu.parentElement.parentElement.style.position = 'relative';
// menu.parentElement.parentElement.style.margin = '5px';
// menu.parentElement.parentElement.style.marginLeft = e.x + 'px';
// menu.parentElement.parentElement.style.setProperty('left', '0', 'important');
// console.log(e.x, menu.parentElement.parentElement);
}
}
一些截图 Widget is long and overflow is auto
When I click without scrolling
请任何帮助都很好