鍍金池/ 問答/HTML/ element-ui框架中Notification組件重疊問題

element-ui框架中Notification組件重疊問題

我的目的是在打開一個單頁的時候，從數(shù)據(jù)庫獲取一張表里的多條數(shù)據(jù)然后以通知的形式顯示出來，因此在mounted鉤子函數(shù)中獲取數(shù)據(jù)庫數(shù)據(jù)后，用for循環(huán)調(diào)用Notification這個組件。

mounted:function(){
        /*獲取產(chǎn)品缺少警告列表并彈出警告消息*/
        this.$http.post('/api/users/getWarning',{}).then((response) => {
          this.lacklist = response.body;
          for(var i=0;i<this.lacklist.length;i++){
            this.$notify({
                title:'警告',
                message:this.lacklist[i].lackwarning_msg,
                type:'warning',
                duration:0
            });
          }
        })
      },

但是在顯示的時候這幾個組件疊在了一起，檢查了一下樣式發(fā)現(xiàn)組件top值遞增量遠小于說明文檔演示時組件top值的遞增量。
圖片描述
圖片描述
但是設置了duration為0不自動關閉Notification組件，當跳轉(zhuǎn)到別的頁面再跳轉(zhuǎn)回來時，新彈出的組件和之前就存在的組件之間的距離（紅色區(qū)域），卻又剛好就是之前重疊的三個組件的距離（黃色框選的三個組件）。
圖片描述

想問問各位大佬出現(xiàn)這種情況是因為Notification組件不能使用索引還是其他什么原因？如果不能使用索引那我應該怎么實現(xiàn)循環(huán)調(diào)用Notification組件？

回答
編輯回答
淺淺

到最后還是不知道是什么原因?qū)е碌?，但還是用定時器解決了這個問題

/*獲取產(chǎn)品缺少警告列表并彈出警告消息*/
this.$http.post('/api/users/getWarning',{}).then((response) => {
  var lacklist = response.body;
  var i = 0;
  var warn = setInterval(() => {
    this.$notify({
      title:'警告',
      message:lacklist[i].lackwarning_msg,
      type:'warning',
      duration:0
    })
    if(i<lacklist.length-1){
      i++;
    }
    else{
      clearInterval(warn);
    }
  },10);
})
2017年7月2日 12:48