手动关闭elementUI的messageBox

Question

项目中遇到一个问题，后端会验证前端所有的请求，当登录已超时会返回相关的状态码，前端拿到登录超时的状态码时要弹出一个MessageBox，现在遇到的情况是，一个页面加载时会发两个请求，当用户已登录超时，会弹出两个MessageBox,关闭一个之后会跳到登录页,到登录页之后还会看到一个MessageBox,查阅过相关文档,都没找到手动关闭的方法;我是这样调用的:

Get(url, params, callback) {
    axios.get(url, {
      params
    }).then(res => {
      if (res.data.ret === 0) {
        callback(res);
      } else if (res.data.ret === 7) { //登录超时
        MessageBox({
          title: '系统提示',
          message: res.data.msg,
          confirmButtonText: '确定',
          closeOnPressEscape: false,
          showCancelButton: false
        }).then(() => {
          router.push('login');
        }).catch(() => {
          router.push('login');
        });
      } else {
        Message({
          message: res.data.msg,
          type: 'error',
          duration: 5 * 1000
        });
      }
    }).catch(err => {
      Message({
        message: err.message,
        type: 'error',
        duration: 5 * 1000
      });
    });
  }

Answer 1

我仔细看了element-ui的文档http://element.eleme.io/#/zh-...，看到了这个例子https://jsfiddle.net/api/post...,文档里有这样一段话,

就是这个done方法,最终解决了困扰我多时的问题,只要修改成这样,就能关掉那些重复弹出的MessageBox了:

MessageBox({
    title: '系统提示',
    message: res.data.msg,
    confirmButtonText: '确定',
    closeOnPressEscape: false,
    showCancelButton: false,
    beforeClose: (action, instance, done) => {
        done(); // 就是它!
    }
}).then(()=>{
    //doSomething();
}).catch(()=>{
    //doSomething2();
});

看文档的时候真是需要多琢磨啊,也多谢楼上的回答;

Answer 2

http://element.eleme.io/#/zh-...

方法

调用 Message 或 this.$message 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 close 方法。

另外，https://github.com/ElemeFE/el... 有一个close 方法，效果如下：

https://jsfiddle.net/xp3zbh2x/

好像遮罩没有清除。

Answer 3

我的做法是，第一次弹出messagebox，记录一个标志位，以后的弹窗就是不处理，退到登陆界面之后，消除标志位

Answer 4

主动关闭element UI message box弹出层:

class="v-modal"是遮罩层，在你所需的事件中 $('.v-modal').click();
就可以主动关闭弹出层及遮罩层。

Answer 5

看了前面几位老哥的解答，我今天也遇到了这个问题，用了done()还是会弹出来

Axios.interceptors.response.use(
response => {

// token过期
if(response.data.code === 401){
  MessageBox.confirm('token过期，请重新登录', '提示', {
    confirmButtonText: '确定',
    type: 'warning',
    showClose: false,
    showCancelButton:false,
    closeOnClickModal: false,
    closeOnPressEscape: false,
    beforeClose: (action, instance, done) => {
      done();  // 这儿加了还是不行，在登录页面还是会弹出
    }
  }).then(() => {
    router.replace({
      name:'login'
    })
  }).catch(() => {});
  return false;
}
最后只有在login页面，加了节点删除来规避这个问题。
    mounted(){
      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)
      }
    },