angular-material – 如何使用x和y坐标改变角度4材质中mat-menu

发布时间：2020-12-17 10:19:49 所属栏目：安全来源：网络整理

导读：我在角4中有以下菜单 button mat-button [matMenuTriggerFor]="menu" style="display:none;"Menu/button mat-menu #menu="matMenu" button mat-menu-item *ngFor="let item of items" (click)="select(item)" {{ item }} /button /mat-menu 当用户使用屏幕选

我在角4中有以下菜单

<button mat-button [matMenuTriggerFor]="menu" style="display:none;">Menu</button>
    <mat-menu #menu="matMenu">
        <button mat-menu-item *ngFor="let item of items" (click)="select(item)">
            {{ item }}
        </button>
    </mat-menu>

当用户使用屏幕选择文本时,我打开菜单
matMenuTrigger.openMenu();

但是我希望在用户选择文本的地方打开菜单.
我有用户选择的X和Y坐标,但如何更改菜单的位置？

我已尝试将Id添加到mat-menu并使用更改它的位置

element.style.position = 'absolute'
element.style.left = screenX + 'px'
element.style.top = screenY + 'px'

但它并没有改变菜单的位置.

编辑：
我改变了菜单的位置

this.matMenuTrigger.openMenu();
var element = document.getElementsByClassName('cdk-overlay-pane');
menu.style.position = "absolute";
menu.style.left = evt.pageX + 5 + 'px';
menu.style.top = evt.pageY + 5 + 'px';

其中evt是mouseup事件,它给出了用户文本选择的坐标(X,Y).

但是,当我滚动页面时,打开的菜单再次回到原来的位置.
如何保持菜单在滚动时改变位置？

我已经实现了开放式菜单,用户可以选择文本.

我添加了隐藏按钮,点击打开菜单.
在用户文本选择上,我更改了style =“display：none;”该按钮的样式=“display：”;”在显示该按钮后,我已将该按钮的位置更改为用户通过x和y坐标选择文本的位置,然后通过this.menuTrigger.openMenu()以编程方式打开菜单.

DEMO

菜单example.ts

export class MenuIconsExample {
@ViewChild(MatMenuTrigger)
    private menuTrigger: MatMenuTrigger;

  addTextToOpns: Array<String> = ["option 1","option 2","option 3"];
  selectedOption: string = "no Option selected";
  onTextSelection(event: any):void{
    if(window.getSelection && window.getSelection().toString()){
      var menu = document.getElementById('menuBtn');
      menu.style.display = '';
      menu.style.position = 'absolute';
      menu.style.left = event.pageX + 5 + 'px';
      menu.style.top = event.pageY + 5 + 'px';

      this.menuTrigger.openMenu();  
    }

  }

  onMenuClosed():void {
    var menu = document.getElementById('menuBtn');
        if (menu) {
            menu.style.display = 'none';            
        }
  }

  addTextTo(selectedOpn): void {
    this.selectedOption = selectedOpn + ' selected';
  }

}

菜单example.html的

<div (mouseup)="onTextSelection($event)">
  <button mat-button [matMenuTriggerFor]="menu" id="menuBtn" style="display:none;">Menu</button>
    <mat-menu #menu="matMenu" (close)="onMenuClosed()">
        <button class="menuOpnBtn" mat-menu-item *ngFor="let opn of addTextToOpns" (click)="addTextTo(opn)">
            {{ opn }}
        </button>
    </mat-menu>
  <p>
    text for selection
  </p>
</div>
<br/>
<br/>


<div><span>selected option : </span> <span>{{selectedOption}}</span></div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!