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

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

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

var offset = 0;

for(var j = 0; j< data.length; j++){

    vm.$notify.error({

        title: '错误',

        message: data[j],

        offset: offset

    });

    offset += 70

}