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++){&nbsp; &nbsp; vm.$notify.error({&nbsp; &nbsp; &nbsp; &nbsp; title: '错误',&nbsp; &nbsp; &nbsp; &nbsp; message: data[j],&nbsp; &nbsp; &nbsp; &nbsp; offset: offset&nbsp; &nbsp; });&nbsp; &nbsp; offset += 70}