ant design vue:upload打开选择文件弹框前弹出确认框
继续搜索,发现一个解决思路是使用两个按钮叠加,上层的普通按钮点击后弹出确认框,点了确认后再使用ref的click来触发upload组件内部的按钮点击事件,但是这个方案有一些瑕疵,比如我还得使用css将两个按钮叠加起来,还需要想办法阻止下层按钮的点击事件。看antd文档,刚开始我用得beforeUpload来实现,勉强能完成我想要的功能,但是流程上不完美,需要先选择了文件,才能弹出确认框,但是我的确
看antd文档,刚开始我用得beforeUpload来实现,勉强能完成我想要的功能,但是流程上不完美,需要先选择了文件,才能弹出确认框,但是我的确认框其实跟文件没有关系,我想要先弹确认框再打开文件选择弹框。
继续搜索,发现一个解决思路是使用两个按钮叠加,上层的普通按钮点击后弹出确认框,点了确认后再使用ref的click来触发upload组件内部的按钮点击事件,但是这个方案有一些瑕疵,比如我还得使用css将两个按钮叠加起来,还需要想办法阻止下层按钮的点击事件。
继续看antd文档,发现openFileDialogOnClick这个属性能解决我的问题。
初始状态下openFileDialogOnClick设置为false,给upload组件里的button添加点击事件,在点击事件里去弹出确认框,在确认框里点了确定,我们在将openFileDialogOnClick设置为true,然后我们在用ref来触发upload,文件选择框就可以打开了。
需要注意的是,当我们使用ref触发click的时候,原来在button上添加的点击事件也会触发,所以当openFileDialogOnClick为true的时候,确认框依旧会弹出来,这时候需要加判断,只有当openFileDialogOnClick为false的时候才弹出确认框。文件上传结束后,还要记得将openFileDialogOnClick恢复初始值false。
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelSyncToUser"
@change="handleImportExcelSyncToUser" accept=".xls" :openFileDialogOnClick="openFileDialogOnClick">
<a-button ref="btn" type="primary" icon="import" @click="handleClick">考生基本信息导入</a-button>
</a-upload>
handleClick(){
//当openFileDialogOnClick为false的时候,要弹出确认框
if(!this.openFileDialogOnClick){
this.getProjectName();
}
},
getProjectName(){
if(!this.projectId){
this.$message.error("请选择项目!");
return
}
let projectName = '';
let url = this.url.queryById+'?projectId='+this.projectId;
getAction(url).then(res => {
if (res.success) {
projectName = res.result.name;
this.$confirm({
title: '导入确认',
content: '请确定项目名称:'+projectName,
okText: '确定导入',
cancelText: '取消导入',
onOk: () => {
// 上传前的事件处理完成后,触发上传文件的事件
this.confirmImport();
},
onCancel: () => {
this.openFileDialogOnClick = false;
return
},
});
}else{
this.$message.warning(res.message)
}
})
},
confirmImport(){
this.$confirm({
title: '考生基本信息导入确认',
content: '每次导入会覆盖原来的数据,确定导入吗?',
okText: '确定导入',
cancelText: '取消导入',
onOk: () => {
this.openFileDialogOnClick = true;
setTimeout(()=>{
// 点击按钮,打开选择文件的对话框
this.$refs["btn"].$el.click();
},50)
},
onCancel: () => {
this.openFileDialogOnClick = false;
return
},
})
},
我这个案例里弹了两次确认框。
更多推荐
所有评论(0)