场景
在1个方法中调用两次this.$notify方法,会出现通知框重叠的问题
testNotify() { this.$notify({ title: "提示", message: '1111', dangerouslyUseHTMLString: true, duration: 0, position: "bottom-right" }); this.$notify({ title: "提示", message: '2222', dangerouslyUseHTMLString: true, duration: 0, position: "bottom-right" }); },
有局限的解决办法
testNotify() { this.$notify({ title: "提示", message: "1111", dangerouslyUseHTMLString: true, duration: 0, position: "bottom-right" }); this.$nextTick(() => { this.$notify({ title: "提示", message: "2222", dangerouslyUseHTMLString: true, duration: 0, position: "bottom-right" }); }); },
推荐解决办法
data(){ return { notifyPromise:Promise.resolve() } }, methods:{ notify(){ //通知,解决element-ui,同时调用notify时,通知重叠的问题 notify(msg) { this.notifyPromise = this.notifyPromise.then(this.$nextTick).then(()=>{ this.$notify({ title: "提示", message: msg, dangerouslyUseHTMLString: true, duration: 0, position: "bottom-right" }); }) } }, testNotify(){ this.notify(111); this.notify(222); this.notify(333); this.notify(444); } }