首页 > 其他分享 >报错:ResizeObserver loop completed with undelivered notifications.

报错:ResizeObserver loop completed with undelivered notifications.

时间:2024-12-13 11:23:43浏览次数:5  
标签:el 销毁 completed undelivered resizeObserver 报错 dialog ResizeObserver 弹窗

 给弹窗添加关闭事件:

<template>
  <el-dialog
    :title="dialog.title"
    :visible.sync="dialog.visible"
    width="60%"
    v-if="dialog.title === '当日预警详情' || dialog.title === '当月预警详情'"
    @close="reset"
  >
    <!-- 弹窗内容 -->
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialog: {
        title: '',  // 弹窗标题
        visible: false  // 弹窗是否显示
      },
      resizeObserver: null,  // 存储 ResizeObserver 实例
    };
  },
  methods: {
    // 用于弹窗关闭时的处理
    reset() {
      this.destroyResizeObserver();  // 销毁 ResizeObserver
      // 其他清理逻辑,比如重置弹窗数据
      console.log('弹窗已关闭,清理资源');
    },
    
    // 创建 ResizeObserver 实例
    createResizeObserver() {
      const element = this.$el.querySelector('.el-dialog');  // 获取 el-dialog 的 DOM 元素
      if (element && !this.resizeObserver) {
        this.resizeObserver = new ResizeObserver(() => {
          // 处理尺寸变化的逻辑
          console.log('弹窗尺寸变化');
        });
        this.resizeObserver.observe(element);  // 观察弹窗元素
      }
    },

    // 销毁 ResizeObserver 实例
    destroyResizeObserver() {
      if (this.resizeObserver) {
        this.resizeObserver.disconnect();  // 停止观察
        this.resizeObserver = null;
      }
    }
  },
  
  watch: {
    // 监听弹窗显示状态,弹窗显示时创建 ResizeObserver,隐藏时销毁
    'dialog.visible': function (newVal) {
      if (newVal) {
        this.createResizeObserver();  // 显示时创建 ResizeObserver
      } else {
        this.destroyResizeObserver();  // 隐藏时销毁 ResizeObserver
      }
    }
  }
};
</script>

<style scoped>
.el-dialog {
  /* 如果有需要,可以自定义 el-dialog 样式 */
}
</style>

 

标签:el,销毁,completed,undelivered,resizeObserver,报错,dialog,ResizeObserver,弹窗
From: https://www.cnblogs.com/tingorb/p/18604497

相关文章

  • 微信小程序中使用echarts 自定义图片时报错: Image is not defined
    最近需要在小程序中完成一个图表,其中需要导入一些自定义的图片来显示。使用echarts-for-weixin项目之后,发现报了如下错误:ReferenceError:Imageisnotdefined经查看源码发现,Echarts.Js文件中是使用NewImage来创建图片的,而小程序中应该使用Canvas.Createimage()因此需要修......
  • win11家庭版使用Windows PowerShell来安装wsl输入命令wsl --install报错 :无法启动服务
    本人不是技术员,只是个小白,只能说久病成医,至于写下这篇文章纯属怕自己以后忘记,给自己一个备份提醒,若有错误的地方,欢迎各位大佬指错第一步:控制面板--程序--卸载程序---左键这个界面左侧的“启用或关闭Windows功能”---勾选红箭头三样---确定---重启电脑     -------......
  • EasyPlayer.js无插件H5播放器报错video抛出Unmuting failed是什么原因?
    当前H5流媒体播放器将迎来更加广阔的发展前景。一方面,5G技术将实现更高的传输速度和更低的延迟,为用户提供更加流畅、稳定的播放体验。另一方面,随着互动功能的不断丰富和完善,H5流媒体播放器将更好地满足用户的个性化需求。有用户在使用时会遇到播放器报错video抛出Unmutingfaile......
  • Web播放器EasyPlayer.js遇到The play() request was interrupted by a call to pause(
    随着互联网技术的飞速发展,尤其是5G技术的普及,很多人对流媒体视频萌生了极大的兴趣,本文将对此详细说明,让更多人了解视频流媒体播放器。EasyPlayer.js作为一款功能强大的无插件H5流媒体播放器,凭借其全面的协议支持、多种解码方式以及跨平台兼容性,赢得了广泛的关注和应用。它不仅为......
  • 【已解决】关于远程连接服务器后vscode报错:由于意外错误,无法打开编辑器: Unterminated
     一、问题与原因    昨天打开VScode准备在远程服务器撸代码时,右下角提示更新,更新后便出现这个问题。问题表现为右下角打开设置提示错误、安装与更新扩展显示错误、本地扩展被禁用导致编辑器变成纯txt代码阅读器、命令面板进入setting.json文件毫无异常。错误显示大致......
  • convert生成视频的报错处理
    一、convert生成gif报错问题:执行convert-delay12-loop1*jpg./DI4_z1.gif报错:convert-im6.q16:cacheresourcesexhausted`./DI4_z1.gif'@error/cache.c/OpenPixelCache/4095.convert-im6.q16:memoryallocationfailed`./DI4_z1.gif'@error/quantize.c/As......
  • 解决Gradle报错:only buildscript {} and other plugins {} script blocks are allowed
    解决Gradle报错:onlybuildscript{}andotherplugins{}scriptblocksareallowedbeforeplugins{}blocksTag:Gradle,plugins,buildscript,Gradle报错,ExtractVariable,build.gradle问题描述在使用Gradle配置项目时,我遇到了一个让人困惑的错误提示:“onlyb......
  • 【YashanDB知识库】exp导出csv报错YAS-00218 string conversion failed
    【问题分类】数据导入导出【关键字】YAS-00218stringconversionfailed【问题描述】使用exp导出成csv报错YAS-00218stringconversionfailed【问题原因分析】首先使用showparametercharacter查看数据库服务端字符集,发现服务端字符集为GBK然后在文件$YASDB_HOME/client/......
  • Linux如何挂载windows共享文件夹(包含Linux报错解决)
     目录前言windows如何共享文件夹windows如何查看共享Linux端挂载共享文件夹关于挂载共享文件夹的报错解决1.关闭windows防火墙2.确认windows的CIFS文件共享功能是否开启3.检查源路径与挂载路径是否正确4.检查用户名及密码是否正确5.检查共享文件夹权限6.......
  • RTSP播放器EasyPlayer.js报错“Too many active WebGL contexts” 是什么原因?
    随着互联网技术的飞速发展,流媒体视频已成为信息传播和娱乐消费的重要形式。无论是在线视频平台、社交媒体还是在线教育,流媒体视频的应用无处不在。而在这一生态系统中,开发者选择什么样的播放器进行集成和开发,也是至关重要的。随着技术的发展,越来越多的H5流媒体播放器开始支持H.26......