vue element ui - $prompt 对话框 作者:马育民 • 2024-04-20 22:58 • 阅读:10128 # 说明 官方文档: https://element.eleme.cn/#/zh-CN/component/message-box ### 提出问题 文档中的例子,当点击 `确定` 时,如果后端操作失败,窗口仍然会关闭 [![](/upload/0/0/1IX7Xx5bS2tl.jpg)](/upload/0/0/1IX7Xx5bS2tl.jpg) ### 解决 修改官方文档中的例子,使用 `beforeClose` 方法,如果后端执行成功后,才关闭窗口,否则给出错误提示 ### beforeClose 说明 MessageBox 关闭前的回调,会暂停实例的关闭 函数声明: ``` function(action, instance, done) ``` **形参:** - action:的值为: - `confirm`:表示点击 `确定` 按钮 - `cancel`:表示点击 `取消` 按钮 - `close`:表示点击 `关闭` 按钮 - instance:为 MessageBox 实例,可以通过它访问实例上的属性和方法。如:`instance.inputValue` 获取输入框中的内容 - done:通过 `done()` 关闭窗口 ### 关键代码 ``` this.$prompt('请输入名称', '提示', { inputValue: data.name, confirmButtonText: '确定', cancelButtonText: '取消', beforeClose: (action, instance, done) => { if(action != 'confirm'){ // 表示点击取消、关闭按钮 done() // 关闭窗口 return } axios.post('/mgr/api/rename', { path: this.path+"/"+data.name, name: instance.inputValue, // 获取输入框中的内容 }) .then(res => { //console.log(res.data); if(res.data.code == 0){ this.$message({ message: res.data.msg, type: 'success' }); this.goAbsPath() done() // 操作成功就关闭窗口 }else{ // 否则就给出错误提示,且不关闭窗口 this.$message.error(res.data.msg); } }); } }).catch(() => {// 没有该方法会提示警告 }); ``` 原文出处:http://www.malaoshi.top/show_1IX7XxCwJygq.html