最近接到一个需求，前端采用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
},验证后该方案完美解决了上传组件的确认提示。