如何防止点击时显示垫菜单？

cbcc 发表于 Dev

cbcc

我想在鼠标悬停和鼠标移出时显示和隐藏Mat-menu，但是如何防止在单击时显示Mat-menu？

的HTML

<button mat-mini-fab color="primary" [matMenuTriggerFor]="menu"
  (mouseenter)="openMenu()">
  <img class="face" *ngIf="isLoginIn()" [src]="faceUrl">
</button>
<mat-menu #menu="matMenu">
  <div (mouseleave)="closeMenu()">
    <button class="login-menu-item" mat-flat-button color="primary">Login</button>
    <button class="login-menu-item" mat-flat-button color="">Logout</button>
  </div>
</mat-menu>

元帅

您可以使用div而不是按钮，然后只需要获取的模板引用即可在和事件matMenuTrigger上调用open和close方法。mouseentermouseleave

<div mat-mini-fab color="primary" #menuTrigger="matMenuTrigger [matMenuTriggerFor]="menu" (mouseenter)="menuTrigger.openMenu()">
  <img class="face" *ngIf="isLoginIn()" [src]="faceUrl">
</div>
<mat-menu #menu="matMenu">
  <div (mouseleave)="menuTrigger.closeMenu()">
    <button class="login-menu-item" mat-flat-button color="primary">Login</button>
    <button class="login-menu-item" mat-flat-button color="">Logout</button>
  </div>
</mat-menu>

修订版

貌似创建包装DIV的mat-menu，并分配matMenuTrigger到包装DIV将阻止通过点击顶部打开菜单MENU DIV。

<div (mouseenter)="menuTrigger.openMenu()">Menu</div>
<div #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu">
    <mat-menu #menu="matMenu" >
       <div (mouseleave)="menuTrigger.closeMenu()">
          <button mat-menu-item>Item 1</button>
          <button mat-menu-item>Item 2</button>
       </div>
    </mat-menu>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。