VUE 3.0 Element-plus ResizeObserver loop completed with undelivered notifications 报错

在APP.VUE添加使用了ResizeObserver监听器并且该监听器触发了重复的调整大小事件。鼠标拖拽浏览器窗口改变视图大小时报错。

排码的小拇指

1116人浏览 · 2023-12-29 11:00:39

排码的小拇指 · 2023-12-29 11:00:39 发布

VUE 使用Element-plus ResizeObserver loop completed with undelivered notifications

问题描述:

鼠标拖拽浏览器窗口改变视图大小时报错。报错如下
在这里插入图片描述

解决方案

在APP.VUE添加使用了ResizeObserver监听器并且该监听器触发了重复的调整大小事件

const debounce = (fn, delay) => {
      let timer = null
      return function () {
        let context = this
        let args = arguments
        clearTimeout(timer)
        timer = setTimeout(function () {
          fn.apply(context, args)
        }, delay)
      }
    }

    const _ResizeObserver = window.ResizeObserver
    window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
      constructor(callback) {
        callback = debounce(callback, 16)
        super(callback)
      }
    }

Vue 3.0 代码

<template>
  <el-header>
    <Head />
  </el-header>

  <div class="EMS_ViewBotton LKJ_Displayflex">
    <div class="NavMenu">
      <NavMenu></NavMenu>
    </div>
    <div class="RefreshView">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'

export default {
  name: 'App',
  components: {
    Head: defineAsyncComponent(() => import('./components/Head.vue')),
    NavMenu: defineAsyncComponent(() => import('./components/NavMenu.vue')),
  },
  setup() {
    const debounce = (fn, delay) => {
      let timer = null
      return function () {
        let context = this
        let args = arguments
        clearTimeout(timer)
        timer = setTimeout(function () {
          fn.apply(context, args)
        }, delay)
      }
    }

    const _ResizeObserver = window.ResizeObserver
    window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
      constructor(callback) {
        callback = debounce(callback, 16)
        super(callback)
      }
    }
    return {}
  },
}
</script>

<style  lang="scss" >
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
}
</style>
<style>
@import url('assets/css/common.scss');
</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^