给弹窗添加关闭事件:
<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