ant 循环多条通知提醒框堆叠问题

最新推荐文章于 2025-10-06 04:36:23 发布

原创

最新推荐文章于 2025-10-06 04:36:23 发布 · 655 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

文章讲述了在AntDesign低版本中，如何通过使用Promise或类似方法解决循环显示通知时的堆叠问题，使得每条通知平铺显示。作者展示了在Vue.js中的具体实现代码和效果。

ant 低版本中循环多条通知时通知提示框会出现堆叠的问题最后一条会显示在界面上，关闭第一条才会显示倒数第二条信息，我想要所有通知都平铺，用Promise 或者nextTick和setTimeout都可以达到效果，我这里用了Promise

  // data中定义  tippromise: Promise.resolve(),   
 funtIp() {
 var   tip= [
                { title: "信息一", text: "病人一", key: 1 },
                { title: "信息二", text: "病人二", key: 2 },
                { title: "信息三", text: "病人三", key: 3 },
            ],
            this.tip.forEach(res => {
                const key = res.key;
                this.tippromise = this.tippromise.then(() => {
                    this.$notification.open({
                        message: `预警信息 `,//${placement}
                        description: res.title,

                        placement: "bottomRight",
                        duration: 0,

                        btn: h => {
                            return h(
                                'a-button',
                                {