问题:最近项目中在做一个上传文件的功能,采用了NG-ZORRO官网的模板,结果发现当光标在button上,按enter键会触发两次的文档弹框,第一次弹框选中文件并确认后,接着又弹一次,使得上一次的无效。如果选中取消,结果还会弹一次。
解决过程:
1.由于发现官网给出的模板也有这种问题,于是想着到github找这个框架相关问题及处理,结果也没搜索到,最后自己在讨论区留了这个问题。
2.查nz-upload相关属性,阅读源码,希望找到突破口,仍然没解决。
3.网上查到与nz-upload相似的el-upload也存在类似问题,一个是禁用组件,一个是采用 stopPropagation(),尝试了一下,发现也不行,不可以禁用,也没有冒泡事件
4.最后猜想是不是需要阻止默认,最后采用preventDefault(),成功解决了这个问题。
button上加(keypress)="$event.preventDefault()" 即可
附:
<nz-upload nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" [nzHeaders]="{ authorization: 'authorization-text' }" (nzChange)="handleChange($event)">
<button nz-button (keypress)="$event.preventDefault()">
<i nz-icon nzType="upload"></i>
Click to Upload
</button>
</nz-upload>