ant design vue:upload打开选择文件弹框前弹出确认框

您所在的位置:网站首页 选择文件按钮 ant design vue:upload打开选择文件弹框前弹出确认框

ant design vue:upload打开选择文件弹框前弹出确认框

2024-07-07 11:58| 来源: 网络整理| 查看: 265

看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。

考生基本信息导入 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 }, }) },

我这个案例里弹了两次确认框。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3