vue element ui - $prompt 对话框-马育民老师

# 说明

官方文档：
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