antd-Vue上传组件增加确认提示（antdesign上传组件）

最近接到一个需求，前端采用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
    },

验证后该方案完美解决了上传组件的确认提示。