vue element ui - $prompt 对话框

说明

官方文档:
https://element.eleme.cn/#/zh-CN/component/message-box

提出问题

文档中的例子,当点击 确定 时,如果后端操作失败,窗口仍然会关闭

解决

修改官方文档中的例子,使用 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(() => {// 没有该方法会提示警告

});

原文出处:/show_1IX7XxCwJygq.html