相关疑难解决方法(0)

88
推荐指数
3
解决办法
10万
查看次数

如何在悬停时打开和关闭Angular mat菜单

这个问题是参考这个 Github问题,mat-menu使用鼠标悬停不能切换,我基本上试图用角度材料的菜单替换基于bootstrap的水平导航菜单.阻止我复制基于bootstrap的菜单的唯一一件事就是mat-menu在悬停时打开和关闭.正如上面的Github问题所提到的,有一些解决方法可以实现我想要的,比如使用mouseEnter

(mouseenter)="menuTrigger.openMenu()"
Run Code Online (Sandbox Code Playgroud)

或者在Mat-menu中添加一个span以便绑定mat-menu,

<mat-menu #menu="matMenu" overlapTrigger="false">
  <span (mouseleave)="menuTrigger.closeMenu()">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </span>
</mat-menu>
Run Code Online (Sandbox Code Playgroud)

但是没有一个解决方案似乎涵盖了每一个小场景,

例如

如上面的Github问题所述,第一个SO解决方案存在以下问题.

  • 将鼠标光标悬停在按钮上会弹出菜单.但是如果你点击按钮,它将隐藏并显示菜单.恕我直言,这是一个错误.
  • 要隐藏菜单,用户需要单击菜单外部.理想情况下,如果鼠标光标位于 超过400毫秒
    的区域(包括按钮,菜单和子菜单)之外,则菜单将被隐藏
    .

并且在试图解决上述问题之一但不能正常工作的跨度解决方案中,例如

悬停MatMenuTrigger确实mat-menu按预期打开,但如果用户在不输入的情况下移开鼠标mat-menu,则它不会自动关闭,这是错误的.

同时移动到其中一个级别的两个子菜单也关闭了一级菜单,这不是我想要的,

PS将鼠标从一个打开的菜单移动到下一个兄弟菜单不会打开下一个菜单.我想这可能是难以实现提到这里,但我认为,其中的一些可能实现的吧?

这是一个基本的stackBlitz,它重现了我正在经历的,任何帮助表示赞赏.

material-design angular-material angular-material2 angular angular-material-6

10
推荐指数
5
解决办法
1万
查看次数