最近、古いプロジェクトの Vue2 プロジェクトで、Element のダイアログを使用してタブをネストし、同時に destroy-on-close を使用すると、ダイアログを閉じるときにブラウザがフリーズしてしまいました。と vue が一致しませんでした。しかし、古いプロジェクトは再アップグレードするには十分ではなく、タブ内の el-row レイヤーをアウトソーシングするのは無駄です。最後に、chatgpt に解決してもらいました、ははははは
/*这个问题可能是由于 Vue2 和 Element UI 的组件在销毁时出现了问题。当关闭 dialog 时,可能没有正确地销毁内部的 tabs 组件,导致浏览器卡死。为了解决这个问题,你可以尝试以下方法:
使用 v-if 而不是 v-show 控制 dialog 的显示和隐藏。这样可以确保在关闭 dialog 时,内部的 tabs 组件会被正确地销毁。
*/
html
Copy code
<el-dialog :visible.sync="dialogVisible" v-if="dialogVisible">
<el-tabs>
<!-- your tabs content -->
</el-tabs>
</el-dialog>
<el-dialog :visible.sync="dialogVisible" v-if="dialogVisible">
<el-tabs>
<!-- your tabs content -->
</el-tabs>
</el-dialog>
/*在关闭 dialog 时,手动销毁内部的 tabs 组件。你可以在 dialog 的 @close 事件中触发一个方法,然后在该方法中销毁 tabs 组件。*/
html
Copy code
<el-dialog :visible.sync="dialogVisible" @close="handleClose">
<el-tabs ref="tabs">
<!-- your tabs content -->
</el-tabs>
</el-dialog>
<el-dialog :visible.sync="dialogVisible" @close="handleClose">
<el-tabs ref="tabs">
<!-- your tabs content -->
</el-tabs>
</el-dialog>
javascript
Copy code
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
handleClose() {
this.dialogVisible = false;
this.$nextTick(() => {
this.$refs.tabs.$destroy();
});
}
}
};
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
handleClose() {
this.dialogVisible = false;
this.$nextTick(() => {
this.$refs.tabs.$destroy();
});
}
}
};
/*如果上述方法仍然无法解决问题,你可以尝试升级 Vue 和 Element UI 到最新版本,看看是否有相关的 bug 修复。
*/
上記は gpt の答えです。それに v-if="dialogVisible" を使用しました