使用element-plus出现ResizeObserver loop completed with undelivered notifications.报错

可以直接看最后的图片

报错信息：：ERROR ResizeObserver loop completed with undelivered notifications. at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:299:58) at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:318:7)

博主是vue3+ts+element-plus项目。

功能：点击按钮调用plus的Dialog对话框组件。

遇到的问题：

第一次点击时，不会报错，正常将弹窗弹出。

从第二次点击开始就报以上错误。

解决方案：加上图片中红色框框圈起来的那个属性，将它改为true

为什么会出现这个问题，为什么这个属性可以解决

由报错信息可知，这个报错提示是由于 ResizeObserver 观察到尺寸变化时，可能存在循环问题或者未正确处理的情况，导致了通知未能及时传递完成。

这个属性之所以能够解决，是因为这个属性是用来在关闭 Dialog 时，销毁其中的元素的。

所以当点击第二次的时候，就不会出现循环的问题了。

黄色字体纯属是博主个人的想法，目前博主也不知道到底是不是这么回事，如果有知道的大佬可以评论区告诉我一下，我好改正，以免误导众人。谢谢~

时隔好几天博主又回来修改了一下文章。因为博主不仅在使用对话框的时候出现了这个问题。

博主现在知道了一个终极解决方案就是：

在main.ts 或者 App.vue 文件中加入以下函数就行了

​


import { debounce } from "lodash";
    
    const _ = (window as any).ResizeObserver;
    (window as any).ResizeObserver = class ResizeObserver extends _ {
      constructor(callback: (...args: any[]) => void) {
        callback = debounce(callback, 100);
        super(callback);
      }
    };

​