我制作了一个 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/