admin管理员组文章数量:1571774
在1个方法中调用两次this.$notify方法,会出现通知框重叠的问题
methods: {
checkLogin: function () {
if (this.username === '') {
this.$notify({
title: '提示',
message: '请输入用户名'
})
}
if (this.password === '') {
this.$notify({
title: '提示',
message: '请输入用户密码'
})
}
}
}
网上查了一下,有文章指出了出现原因及解决办法,原文链接,原因大概如下
$notify
在计算通知的间距时,会取当前元素的高度item.$el.offsetHeight
,但是因为vue的异步更新队列有缓冲机制,第一次方法调用时,并没有更新dom,导致取到的高度为0,所有第二个通知只是上移了默认的offset 16px,并没有加上第一个通知的高度
文章中给出的解决办法是利用vue提供的nextTick
方法,确保DOM刷新后第二次通知能正确的计算高度。对于不定弹出数量的通知可以通过Promise的回调解决。
使用上述方式还是相对有点麻烦,由Promise的使用得到启发,那我是不是可以直接使用异步函数的方式呢?将代码更改如下
methods: {
checkLogin: async function () {
if (this.username === '') {
await this.$notify({
type: 'error',
title: '错误',
message: '请输入用户名'
})
}
if (this.password === '') {
await this.$notify({
type: 'error',
title: '错误',
message: '请输入用户密码'
})
}
}
}
解决办法
将方法定义为async
异步函数,然后使用await
等待执行。解决后效果如下
成功解决,并且代码简化很多
本文标签: 解决办法原因elementUINotification
版权声明:本文标题:element-ui Notification重叠问题,原因及解决办法 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1725726644a1039038.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论