最近接到一个需求,前端采用Ant Design Vue上传的上传组件Upload导入数据,由于导入数据需要清除原有数据,需要给一个提示,增加一个气泡确认框Popconfirm来确认用户操作。
一开始这样写的,把气泡确认框Popconfirm作为上传组件的父级组件,代码如下:
<a-divider type="vertical" />
<a-popconfirm title="确定导入吗,导入将清除现有明细数据?" @confirm="() => handleImport(record.id)" @cancel="cancel">
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelById" @change="handleInportMx">
<a><a-icon type="import" />导入</a>
</a-upload>
</a-popconfirm>
<a-divider type="vertical" />
结果发现点击导入后始终会出现上传文件窗口,气泡确认框完全不起作用。分析发现点击的是upload组件,该组件内部绑定了打开文件夹的事件,不经过气泡确认框的确认点击就生效了。
分析后得到解决方案如下:
1、新增个div层并设置隐藏,把Upload组件放到隐藏的div中。
2、在气泡确认框组件popconfirm下面增加一个图标和<a></a>标签,绑定点击事件。
3、在upload组件的<a></a>标签增加ref属性
4、增加点击事件handleImport,气泡确认框确认后触发,调用ref的点击事件打开文件夹上传文件。
<a-divider type="vertical" />
<a-popconfirm title="确定导入吗,导入将清除现有明细数据?" @confirm="() => handleImport(record.id)" @cancel="cancel">
<a ><p-icon type="import" />导入</a>
</a-popconfirm>
<div style="display:none">
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelById" @change="handleInportMx">
<a ref="upload"><a-icon type="import" />导入</a>
</a-upload>
</div>
<a-divider type="vertical" />
handleImport(id){
this.id = id
this.$refs.upload.click();
this.loading = true
},
验证后该方案完美解决了上传组件的确认提示。