当用户将鼠标悬停在列表项上时,我希望显示一个按钮。当用户离开列表项时,我希望不显示该按钮。
我遇到了 mouseenter 事件和 mouseleave 事件。
.html
<mat-list-item (mouseenter)="enter($event)" (mouseleave)="leave($event)" class="chat-message-body" *ngIf="auth._id !== message.author._id" fxLayoutAlign=""
dir="ltl">
<div matLine>
<b>{{message.author.profile.username}} </b>
<span>{{message.created_at | date:'shortTime'}} </span>
</div>
<button mat-icon-button>
<mat-icon aria-label="">keyboard_arrow_down</mat-icon>
</button>
<span matLine> {{message.body}} </span>
<img matListAvatar class="img-box" src="http://via.placeholder.com/30x30" alt="...">
</mat-list-item>
.ts
enter(e) {
console.log("enter");
}
leave(e) {
console.log("leave");
}
除了声明这些功能之外,我不知道如何定位此列表项中的按钮以显示和隐藏它,具体取决于用户是否已进入列表项块或离开。
我为此创建了一个解决方案。
当用户“鼠标进入”mat-item-list 块时,我将变量设置为 true 并在按钮中添加 ng-if,以便当变量为 true 时它会显示,当用户从 mat-item-list 中“鼠标离开”时该变量设置为 false。假设您只有一个 mat-item-list,这可以很好地工作。
拥有多种手段,当用户进入块时,我需要一个变量来存储索引值,并确定索引值集是否与我悬停的索引值相同。如果是,将显示该按钮。
.html
<mat-list dense>
<ng-template ngFor let-message [ngForOf]="conversation?.messages" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
<mat-list-item (mouseenter)="enter(i)" (mouseleave)="leave(i)" class="chat-message-body" *ngIf="auth._id === message.author._id"
fxLayoutAlign="" dir="rtl">
<img matListAvatar class="img-box" src="http://via.placeholder.com/30x30" alt="...">
<button mat-icon-button *ngIf="hoverIndex == i">
<mat-icon aria-label="">keyboard_arrow_down</mat-icon>
</button>
<div matLine>
<b>{{message.author.profile.username}} </b>
<span>{{message.created_at | date:'shortTime'}} </span>
</div>
<span matLine> {{message.body}} </span>
</mat-list-item>
</ng-template>
</mat-list>
.ts
enter(i) {
this.hoverIndex = i;
}
leave(i) {
this.hoverIndex = null;
}
这个解决方案看起来比尝试查找特定的 dom 元素并向其添加 display:block/none 更干净。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)