element-ui框架中Notification组件重叠问题

Question

我的目的是在打开一个单页的时候，从数据库获取一张表里的多条数据然后以通知的形式显示出来，因此在mounted钩子函数中获取数据库数据后，用for循环调用Notification这个组件。

mounted:function(){
        /*获取产品缺少警告列表并弹出警告消息*/
        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
            });
          }
        })
      },

但是在显示的时候这几个组件叠在了一起，检查了一下样式发现组件top值递增量远小于说明文档演示时组件top值的递增量。


但是设置了duration为0不自动关闭Notification组件，当跳转到别的页面再跳转回来时，新弹出的组件和之前就存在的组件之间的距离（红色区域），却又刚好就是之前重叠的三个组件的距离（黄色框选的三个组件）。

想问问各位大佬出现这种情况是因为Notification组件不能使用索引还是其他什么原因？如果不能使用索引那我应该怎么实现循环调用Notification组件？

Answer 1

到最后还是不知道是什么原因导致的，但还是用定时器解决了这个问题

/*获取产品缺少警告列表并弹出警告消息*/
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);
})

Answer 2

没有看源码，但是我理解是每次调用$notify.xxxx的时候，它会自动去计算当前应该的偏移量是多少，但是当第几次计算的时候，由于第一次的页面还没有渲染出来，所以计算出的偏移量是不准确的。这样就造成了重叠在一起的效果。

可以参考一下，强制设置偏移量

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

Answer 3

也碰到这个问题了，算是解决了，我的解决方法在
https://juejin.im/post/5c87a7...