我制作了一个 type="file"的自定义输入字段,因为我不喜欢默认的输入字段。
为了实现这一点,我做了:

<input
            #uploadFile
            type="file"
            id="uploadFile"
            class="hidden-input"
            accept="image/jpeg, .jpeg, image/png, .png, image/pjpeg, .jpg, .docx, .pdf"
            (change)="selectFile($event.target.files[0])"
        />

     <label [matTooltip]="Upload a file" for="uploadFile">
<mat-icon>folder_open</mat-icon>
</label>

所以基本上它隐藏了原始输入,并且使用标签我可以通过单击垫图标打开浏览文件窗口。

这很有效,但我想使用标签 <button mat-icon-button> 来对图标产生很好的涟漪效果,而不是标签,但标签中使用的 "for" 不适用于 <button>

如果我将我的 mat-icon 用上面的按钮标签包裹在标签标签中,会发生什么, button 看起来像我想要的那样,但是当我点击什么都没有发生时,我想这是因为 button 高于 label ,所以 label 没有没有点击,我尝试使用 z-index 但不起作用。

关于如何解决这个问题的任何想法?

最佳答案

只需制作一个按钮,其点击会触发隐藏文件输入上的点击事件

<button (click)="uploadFile.click()" mat-icon-button>
 <mat-icon>arrow_upward</mat-icon>
</button>

关于javascript - Angular - CSS - 自定义类型=文件输入,如何使用按钮而不是标签?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53813791/

10-11 12:39
查看更多