如何使“材料设计菜单"(mat-menu)隐藏在鼠标左键上 [英] How to make Material Design Menu (mat-menu) hide on mouseleave
本文介绍了如何使“材料设计菜单"(mat-menu)隐藏在鼠标左键上的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我成功地使菜单出现在mouseenter
上.我现在想做的是使其消失在菜单本身的mouseleave
事件中.关于如何使其成为可能的任何想法?
I succeeded in making the menu appear on mouseenter
. What I want to do now is make it disappear on the mouseleave
event of the menu itself. Any ideas on how to make this possible?
<button mat-button [mat-menu-trigger-for]="menu"
#menuTrigger="matMenuTrigger" (mouseenter)="menuTrigger.openMenu()">
TRIGGER BUTTON
</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false"
(mouseleave)="menuTrigger.closeMenu()">
<button mat-menu-item [routerLink]="['sources']">
<mat-icon>view_headline</mat-icon>
MENU CHOICE
</button>
</mat-menu>
推荐答案
您可以通过将菜单按钮包装在<span>
元素中来实现:
You can do this by wrapping the menu buttons in a <span>
element:
HTML:
<button mat-button
[matMenuTriggerFor]="menu"
(mouseenter)="openMyMenu()">
Trigger
</button>
<mat-menu #menu="matMenu" overlapTrigger="false">
<span (mouseleave)="closeMyMenu()">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</span>
</mat-menu>
组件:
export class MenuOverviewExample {
@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
openMyMenu() {
this.trigger.openMenu();
}
closeMyMenu() {
this.trigger.closeMenu();
}
}
演示(V5):
材料V6:
这篇关于如何使“材料设计菜单"(mat-menu)隐藏在鼠标左键上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文