Angular 2：如何实现悬停上下文菜单功能

Question

我想实现一个行为类似Google Inbox悬停上下文菜单的组件：

想知道如何以可以重复使用的方式实现它，我主要担心的是：

1. 我应该如何正确显示/隐藏它？
2. 如何正确安排？

欢迎任何帮助。

Answer 1

我可能会在菜单项组件中添加一些代码，这会在悬停时触发display: block和display: none。如果您使用*ngFor来显示菜单项，它看起来是实现您想要的最简单方法。

猜测您的代码如下：

<ul class="menu-list">
    <li *ngFor="let item of menu.items" class="menu-item">
        <span class="content"> <!-- content --> </span>
        <span class="date-and-check"> <!-- date and check mark --> </span>
        <span class="submenu"></span>
    </li>
</ul>

然后CSS看起来与此类似：

.menu-list .menu-item {
    width: calc(100% - 80px);
    height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
 }

 .menu-list .menu-item date-and-time {
    width: 80px;
    height: 40px;
 }

 .menu-list .menu-item .submenu {
    width: 100px;
    height: 40px;
    display: none;
 }

.menu-list .menu-item:hover {
    width: calc(100% - 100px);
}

.menu-list .menu-item:hover .date-and-time {
    display: none;
}

.menu-list .menu-item:hover .submenu {
    display: inline-block;
}