报错:ResizeObserver loop completed with undelivered notifications.

 给弹窗添加关闭事件:

<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>

 

posted @ 2024-12-13 11:13  .Tik  阅读(919)  评论(0)    收藏  举报