如何在单击位置打开菜单

时间:2018-12-07 06:16:16

标签: angular angular-material angular6 angular2-directives

我已经做出了扩展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

When I scroll and open it

请任何帮助都很好

0 个答案:

没有答案