问题描述
在Vue项目中,当使用Element UI的el-dialog
组件来承载一个包含Wangeditor富文本编辑器的表单时,可能会遇到这样一个问题:当关闭对话框后再次打开,其他输入框的内容都能被正确清空,但富文本编辑器中的内容却保持不变。这通常是因为Wangeditor的实例没有被正确销毁,导致即使对话框被关闭,编辑器的内容状态依然保留在内存中。
初步尝试
首先,可能会尝试在对话框关闭时手动销毁Wangeditor的实例。这通常涉及到调用Wangeditor提供的destroy
方法。然而,仅仅这样做可能并不足以解决问题,因为Vue的组件销毁和DOM的移除之间可能存在细微的时机差异。
深入分析与解决
检查Wangeditor的销毁逻辑
确保在组件销毁的生命周期钩子(如beforeDestroy
或unmounted
)中正确调用了Wangeditor的destroy
方法。通常类似这样(详见官方文档 用于 Vue React | wangEditor):
beforeDestroy() {
if (this.editor) {
this.editor.destroy();
this.editor = null;
}
}
使用Element UI的销毁API
为了彻底解决内容残留问题,我们可以结合Vue的组件销毁逻辑。当对话框需要关闭时,我们不仅要设置visible
为false
来隐藏对话框,还要确保整个表单组件(或至少包含Wangeditor的组件)被正确销毁。这可以通过Vue的key
属性来实现,每次打开对话框时都生成一个新的key
值,这样Vue就会重新渲染并销毁旧的组件实例。
然而,更简单且直接的方法是直接调用Element UI的销毁方法Element - The world's most popular Vue UI framework
因为如果不如此做,仅关闭弹窗无法销毁editor的组件(除非刷新页面强制Wangeditor调用他的销毁模块)此时需要使用elementUI的直接销毁方法销毁整个窗口 destroy-on-close,通过这种方式,你可以确保每次打开对话框时都是一个新的、干净的表单状态,避免了内容残留的问题。