el-dialog关闭后销毁

el-dialog是一个Vue.js的组件，它表示一个模态对话框。在Vue.js组件的使用中，每个组件都包含一个钩子函数mounted。这个函数会在组件被挂载到页面上之后执行。我们可以在这个钩子函数中注册关闭对话框后销毁的事件。

在el-dialog的组件代码中，我们需要设置一个ref属性，用来绑定这个组件。然后在钩子函数mounted中，我们需要使用$nextTick函数来确保el-dialog已经挂载完毕。接着，我们需要将关闭事件与销毁事件绑定在一起。

具体实现方式如下：

<template>
<div>
<el-dialog
ref="dialogRef"
:visible.sync="dialogVisible"
:before-close="handleClose">
<!-- 对话框内容 -->
</el-dialog>
</div>
</template>

<script>
export default {
data() {
return {
dialogVisible: false
};
},
mounted() {
this.$nextTick(() => {
this.$refs.dialogRef.$el.addEventListener('transitionend', this.destroyElement);
});
},
methods: {
handleClose(done) {
this.dialogVisible = false;
done();
},
destroyElement() {
this.$refs.dialogRef.$destroy();
}
}
};
</script>

在上述代码中，我们使用了EventTarget.addEventListener()函数来注册了一个transitionend事件。这个事件表示当对话框关闭动画结束后触发。一旦这个事件被触发，我们就会执行destroyElement函数，这个函数将调用$destroy函数来销毁对话框组件，从而彻底卸载对话框并释放其内存。