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