element ui循环调用this.$alert 消息提示只显示最后一个

更新时间：2022年10月13日 14:37:37 作者：半个小趴菜

这篇文章主要介绍了element ui循环调用this.$alert 消息提示只显示最后一个，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

需求背景

有一个需求，使用element-ui 中的$alert 方法提示用户几条信息，不能一次性提示。仅能一条一条的提示，提示完第一条，点击确定后如果还有待提示消息，就弹出提示第二条，以此类推，直到消耗完所有需要提示的消息结束；现在模拟复现一下这个需求的期望如下图：

那这还不简单？？？我们听完需求心中已经想好了代码怎么写了。于是我们摩拳擦掌说干就干，一顿 C & V 操作，于是有了下面的代码：

 showMsg(){
    for(let i = 0; i < 4; i++){
      this.$alert('show message !'+ i,'提示')      
    }
 }

然后满心欢喜，胸有成竹的一运行，发现事与愿违,来看下运行的结果：

我们发现并没有按我们的预期来执行，而是直接只显示了最后提示，就结束了，那么是什么问题导致了这个问题的出现呢：

问题分析

那我们本着弄清楚事实的心态来搞清楚问题发生的原因，那就翻一翻element-ui 中 $alert 方法到底是怎么实现的？

首先找到 $alert 的入口，他的入口位于 element/blob/dev/src/index.js Line:199

Vue.prototype.$alert = MessageBox.alert;

我们看到他在Vue 的原型上扩展了 $alert 方法，方法指向了 MessageBox.alert

那我们继续跟进 MessageBox.alert Line:161 看看他到底是怎么回事？

我们截取其中的代码片段：

MessageBox.alert = (message, title, options) => {
  if (typeof title === 'object') {
    options = title;
    title = '';
  } else if (title === undefined) {
    title = '';
  }
  return MessageBox(merge({
    title: title,
    message: message,
    $type: 'alert',
    closeOnPressEscape: false,
    closeOnClickModal: false
  }, options));
};

我们看到这个方法代码比较简洁，先是对参数进行了一些处理，最后把处理后的参数merge到默认的一些参数上，返回了 MessageBox 这个方法，根据他的命名我们大概能猜到他是一个类；

MessageBox 类的实现

const MessageBox = function(options, callback) {
  // 判断是否为服务端 ？ 跳过 ...
  if (Vue.prototype.$isServer) return; 
  // 对传入的options 参数进行了判断，是不是 String 或者 vNode ,然后处理参数。这里主要是 处理 title 或 message 
  if (typeof options === 'string' || isVNode(options)) { 
    options = {
      message: options
    };
    if (typeof arguments[1] === 'string') {
      options.title = arguments[1];
    }
  //   处理了参数 callback , 吧options.callback 赋给 callback  ...  
  } else if (options.callback && !callback) {
    callback = options.callback;
  }
  // 判断是否 可以使用 Promise 对象，
  if (typeof Promise !== 'undefined') {
    // 就把参数包装到 Promise 中 push 进入 msgQueue 队列中...  
    return new Promise((resolve, reject) => { // eslint-disable-line
      msgQueue.push({
        options: merge({}, defaults, MessageBox.defaults, options),
        callback: callback,
        resolve: resolve,
        reject: reject
      });
      // 执行 showNextMsg() 方法
      showNextMsg();
    });
  } else {
    // 不支持 promise 就直接 吧参数 push 进队列，再执行 showNextMsg  
    msgQueue.push({
      options: merge({}, defaults, MessageBox.defaults, options),
      callback: callback
    });
    showNextMsg();
  }
};

从上面的代码中我们知道，

处理了传入的参数
维护了一个 msgQueue 队列，用于存放不同场景（是否支持Promise）下的参数
都执行了showNextMsg 方法

查看 showNextMsg 方法的实现

const initInstance = () => {
  instance = new MessageBoxConstructor({
    el: document.createElement('div')
  });
  instance.callback = defaultCallback;
};

const showNextMsg = () => {
  // 首先对 instance 进行了判断，如果没有就 初始化一个，初始化的方法 在上面；由此可见，instance 是一个单例 
  if (!instance) {
    initInstance();
  }
  instance.action = '';
  // 判断 instance 没有显示 或者 存在 closeTimer  的场景
  if (!instance.visible || instance.closeTimer) {
    if (msgQueue.length > 0) { // 判断了队列长度
      currentMsg = msgQueue.shift(); // 移除队列第一项，拿到参数信息
      let options = currentMsg.options; // 下面对参数一顿处理
      for (let prop in options) {
        if (options.hasOwnProperty(prop)) {// 吧参数 复制给 instance 
          instance[prop] = options[prop];
        }
      }
      if (options.callback === undefined) { // 判断有没有 callback 没有就使用 默认的 callback
        instance.callback = defaultCallback;
      }
      let oldCb = instance.callback; // 从新对 callback 进行制定
      instance.callback = (action, instance) => {
        oldCb(action, instance);
        showNextMsg(); // 进行了递归调用，消耗队列
      };
      // 判断了 message 是不是 vnode  如果是 就使用默认的 slot 渲染 ....  
      if (isVNode(instance.message)) {
        instance.$slots.default = [instance.message];
        instance.message = null;
      } else {
        delete instance.$slots.default;
      }
      // 继续处理 参数，如果 这些参数没设置，就全部给他设置为 true
      ['modal', 'showClose', 'closeOnClickModal', 'closeOnPressEscape', 'closeOnHashChange'].forEach(prop => {
        if (instance[prop] === undefined) {
          instance[prop] = true;
        }
      });
      // 吧这个 el 挂载到 body 上面， 此时候的 el 还是隐藏的
      document.body.appendChild(instance.$el);
      // 使用Vue 的nextTick 异步更新队列，去设置 instance 的显示
      Vue.nextTick(() => {
        instance.visible = true;
      });
    }
  }
};

到这里基本就分析完了他使用 Vue.nextTick 异步更新队列去设置了 instance.visible = true;

异步更新队列默认使用了 Promise.then 微任务去处理callback

所以我们在循环中调用 $alert ，是在最后微任务队列清空的时候去设置了 instance.visible = true;

so. 我们只看到最后一条提示。

故此我们已经基本知道了问题的原因，那我对于我们的需求就立马能想到了处理方案，我们仅需吧每一条消息放到宏任务队列中去，即可：

那我们上代码：

showMsg(){
    for(let i = 0; i < 4; i++){
      let timer = setTimeout(()=>{
        this.$alert('show message !'+ i,'提示')
        clearTimeout(timer)
        timer = null    
      })  
    }
}

这样就成功完成了需求所描述的功能 ...

非常的nice

DEMO演示

感受一下这个 demo 吧

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vue 基于element-ui 实现 按钮组按需折叠功能</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" >
</head>
<body>
<div id="app">
    <h2>element-ui 中 alert 实现连续提示</h2>
    <el-button @click="showMsg1">DEMO1</el-button> 单个调用，提示一次
    <hr/>
    <el-button @click="showMsg2">DEMO2</el-button> 循环4次，仅提示了最后一次
    <hr/>
    <el-button @click="showMsg3">DEMO3</el-button> 循环4次，提示了每一次
    <hr/>
    <el-button @click="showMsg4">DEMO4</el-button> 放入微任务队列，仅提示最后一次
    <hr/>
    <el-button @click="showMsg5">DEMO5</el-button> 放入宏任务队列，提示每后一次
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
    el: '#app',
    methods: {
        showMsg1(){
          this.$alert('show message !','提示')
        },
        showMsg2(){
            for(let i = 0; i < 4; i++){
              this.$alert('show message !'+ i,'提示')      
            }
        },
        showMsg3(){
            for(let i = 0; i < 4; i++){
              let timer = setTimeout(()=>{
                this.$alert('show message !'+ i,'提示')
                clearTimeout(timer)
                timer = null    
              })  
            }
        },
        showMsg4(){
            for(let i = 0; i < 4; i++){
              Promise.resolve().then(()=>{
                this.$alert('show message !'+ i,'提示')
              })
            }
        },
        showMsg5(){
            for(let i = 0; i < 4; i++){
              let timer = setTimeout(()=>{
                this.$alert('show message !'+ i,'提示')
                clearTimeout(timer)
                timer = null    
              })  
            }
        },
    },
})
</script>
</html>

以上就是element ui循环调用this.$alert 消息提示只显示最后一个的详细内容，更多关于element ui调用this.$alert 消息提示的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue中EpicEditor和vue-quill-editor的使用详解
EpicEditor和Vue-quill-editor都是基于Quill.js的富文本编辑器,并且都提供了许多强大的功能,下面我们就来介绍一下二者的具体使用,感兴趣的小伙伴可以了解一下
2023-11-11
vue+element-ui:使用el-dialog时弹框不出现的解决
这篇文章主要介绍了vue+element-ui:使用el-dialog时弹框不出现的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue中设置滚动条方式
这篇文章主要介绍了在vue中设置滚动条的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue 大文件分片上传(断点续传、并发上传、秒传)
本文主要介绍了vue 大文件分片上传，主要包括断点续传、并发上传、秒传，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
vue proxyTable的跨域中pathRewrite配置方式
这篇文章主要介绍了vue proxyTable的跨域中pathRewrite配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue网站优化实战之秒开网页
最近在搭建自己的博客,前端采用Vue技术,发现首页加载速度非常之慢,常常达到10S左右,遂开始优化之旅,这篇文章主要给大家介绍了关于vue网站优化实战之秒开网页的相关资料,需要的朋友可以参考下
2022-08-08
vue 使用mescroll.js框架实现下拉加载和上拉刷新功能
这篇文章主要介绍了vue 使用mescroll.js框架实现下拉加载和上拉刷新功能,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-07-07
vue项目如何全局修改el-button样式
这篇文章主要介绍了vue项目如何全局修改el-button样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vant如何实现Collapse折叠面板标题自定义
这篇文章主要介绍了vant如何实现Collapse折叠面板标题自定义，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue学习笔记进阶篇之函数化组件解析
本篇文章主要介绍了Vue学习笔记进阶篇之函数化组件探究，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07