使用NG-ZORRO的nz-upload上传文件时按enter键会两次弹框的问题

问题:最近项目中在做一个上传文件的功能,采用了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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值