我正在用角度11创建此图像上传组件
我有一个放置区div，matRipple所以每当用户放置文件时，它将显示涟漪效应。在该div中，我有向左和向右旋转的按钮。当我单击这些按钮时，也会触发拖放区div的波纹效果。有办法禁用它吗？因此，如果用户单击该div中的按钮，则该div的波纹效果不会发生吗？我以为通过event.stopPropagation()在按钮事件处理程序中添加它可以停止它，但是没有。
这是我的组件：
<div class="container">
<div class="box" style="width: 264px; height: 264px;transition: transform 0.5s" [style.transform]="'rotate(' + this.imageRotation + 'deg)'">
<img style="max-width: 264px; max-height: 264px; position: relative" [src]="selectedFile?.src ? selectedFile?.src : previewImageUrl ? previewImageUrl : null" /></div>
<div class="box stack-top">
<div class="dropzone" comTuxinUpArea (fileDropped)="processFile($event)" matRipple>
<input type="file" id="fileDropRef" accept="image/jpeg,image/png,image/webp" (change)="processFile($event.target)" />
<h3 i18n>drag and drop file here</h3>
<h3 i18n>or</h3>
<label for="fileDropRef" i18n>Browse for file</label>
<div fxLayout="row" fxLayoutAlign="center center" id="rotate-div">
<button mat-icon-button *ngIf="this.selectedFile" (click)="rotateLeft()"><mat-icon>rotate_left</mat-icon></button>
<button mat-icon-button *ngIf="this.selectedFile" (click)="rotateRight()"><mat-icon>rotate_right</mat-icon></button>
</div>
</div>
</div>
旋转按钮事件处理程序：
rotateLeft() {
this.imageRotation+=90;
}
rotateRight() {
this.imageRotation-=90;
}
[matRippleDisabled]="someVariable"在您的div上使用。当您将鼠标悬停在按钮上时，可以在true和false之间更改someVariable的值。
在按钮上使用：(mouseenter)="someVariable=true" (mouseleave)="someVariable=false"启用或禁用外部div上的波纹效果。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句