当前位置：首页 > news >正文

Vue 学习笔记错误ResizeObserver loop completed with undelivered notifications

news 2025/9/4 1:43:48

环境Vue3 Ts
使用了el-table 后，容易出现如下错误
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)
在这里插入图片描述
解决办法
在App.vue 下面加代码

const debounce = (callback: (...args: any[]) => void, delay: number) => {let tid: any;return function (...args: any[]) {const ctx = self;tid && clearTimeout(tid);tid = setTimeout(() => {callback.apply(ctx, args);}, delay);};};const _ = (window as any).ResizeObserver;(window as any).ResizeObserver = class ResizeObserver extends _ {constructor(callback: (...args: any[]) => void) {callback = debounce(callback, 20);super(callback);}};},

App.vue 完整代码如下：

<template><div id="app"><router-view /></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";export default defineComponent({setup() {const debounce = (callback: (...args: any[]) => void, delay: number) => {let tid: any;return function (...args: any[]) {const ctx = self;tid && clearTimeout(tid);tid = setTimeout(() => {callback.apply(ctx, args);}, delay);};};const _ = (window as any).ResizeObserver;(window as any).ResizeObserver = class ResizeObserver extends _ {constructor(callback: (...args: any[]) => void) {callback = debounce(callback, 20);super(callback);}};},
});
</script>
<style lang="scss"></style>