ElementUI - 手动关闭 messageBox 实例弹框

前言

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

后端会验证前端所有的请求，当登录已超时会返回相关的状态码，前端拿到登录超时的状态码时要弹出一个 MessageBox 弹框用于提示用户，假设一个页面加载时触发多个请求后，当用户登录超时后，会弹出两个 MessageBox 弹框。关闭一个之后会跳到登录页，到登录页之后还会看到 N（请求有几个） 个 MessageBox 弹框。

那么如何阻止，只弹出一个呢？

解决方案

调用 ElementUI 提供的 done() 并不能阻止，那么只有获取 DOM 并移除达到目的。

假设点击弹框中的确定后，跳转到登录页，那么在登录页的 mounted() 生命周期函数中，做以下操作即可：

// 获取 messageBox DOM 后移除
var el_message_box = document.querySelector('.el-message-box__wrapper')
var v_modal = document.querySelector('.v-modal')
if(el_message_box && v_modal){
  el_message_box.parentNode.removeChild(el_message_box)
  v_modal.parentNode.removeChild(v_modal)
}