Overlap of Notification components in element-ui Framework

my goal is to get multiple pieces of data from a table from the database and display it in the form of a notification when opening a single page, so after getting the database data in the mounted hook function, call the Notification component with for loop.

mounted:function(){
        /**/
        this.$http.post("/api/users/getWarning",{}).then((response) => {
          this.lacklist = response.body;
          for(var i=0;i<this.lacklist.length;iPP){
            this.$notify({
                title:"",
                message:this.lacklist[i].lackwarning_msg,
                type:"warning",
                duration:0
            });
          }
        })
      },

but these components are stacked on top of each other when displayed, and it is found that the recursive increment of the top value of the component is much smaller than that of the top value of the component during the presentation of the description document.


duration0Notification

I"d like to ask you guys whether this is because the Notification component can"t use indexes, or is it for some other reason? If I can"t use an index, how can I call the Notification component in a loop?


in the end, I still don't know what caused it, but I solved the problem with a timer

/**/
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){
      iPP;
    }
    else{
      clearInterval(warn);
    }
  },10);
})

does not look at the source code, but I understand that every time $notify.xxxx is called, it will automatically calculate the current offset, but when it is calculated for several times, because the first page has not yet been rendered, the calculated offset is not accurate. This creates an overlapping effect.

you can refer to the mandatory offset

.
var offset = 0;
for(var j = 0; j< data.length; jPP){
    vm.$notify.error({
        title: '',
        message: data[j],
        offset: offset
    });
    offset += 70
}

has also encountered this problem, which can be regarded as a solution. My solution is
https://juejin.im/post/5c87a7.

.
Menu