element-ui Notification重叠问题,原因及解决办法

场景

在1个方法中调用两次this.$notify方法,会出现通知框重叠的问题

testNotify() {
      this.$notify({
        title: "提示",
        message: '1111',
        dangerouslyUseHTMLString: true,
        duration: 0,
        position: "bottom-right"
      });
      this.$notify({
        title: "提示",
        message: '2222',
        dangerouslyUseHTMLString: true,
        duration: 0,
        position: "bottom-right"
      });
},

有局限的解决办法

testNotify() {
      this.$notify({
        title: "提示",
        message: "1111",
        dangerouslyUseHTMLString: true,
        duration: 0,
        position: "bottom-right"
      });
      this.$nextTick(() => {
        this.$notify({
          title: "提示",
          message: "2222",
          dangerouslyUseHTMLString: true,
          duration: 0,
          position: "bottom-right"
        });
      });
},

推荐解决办法

data(){
    return {
     notifyPromise:Promise.resolve()   
    }
},
methods:{
    notify(){
        //通知,解决element-ui,同时调用notify时,通知重叠的问题
        notify(msg) {
          this.notifyPromise = this.notifyPromise.then(this.$nextTick).then(()=>{
            this.$notify({
              title: "提示",
              message: msg,
              dangerouslyUseHTMLString: true,
              duration: 0,
              position: "bottom-right"
            });
         })
        }
    },
    testNotify(){
        this.notify(111);
        this.notify(222);
        this.notify(333);
        this.notify(444);
    }
}

连接:https://juejin.im/post/5c87a77d6fb9a04a08228668

原文地址:https://www.cnblogs.com/slightFly/p/11821671.html