vue element ui：el-drawer抽屉关闭时销毁控件 作者：马育民 • 2023-12-21 16:41 • 阅读：10438 # 提出bug 在Drawer组件中设置了 `destroy-on-close="true"`,文档说关闭时销毁 Drawer 中的元素，但是 在设置visible 抽屉的显示跟隐藏时，没有执行销毁 ## 解决 增加 `v-if="noDestroy"` 用于销毁抽屉 增加 `:before-close="handleClose"` 关闭前事件，当关闭抽屉时，执行该函数，在该函数中，先关闭抽屉，**延迟一会儿后，销毁抽屉** **为什么要延迟一会后才销毁？** 答：目的是 收回抽屉的 **动画** 显示结束后，再销毁。如果直接销毁，抽屉突然消失，太突兀了 #### 模板： ``` <el-button type="primary" @click="reg">登记</el-button> <!--抽屉--> <el-drawer v-if="noDestroy" title="登记" :visible.sync="drawer" direction="rtl" size="50%" :before-close="handleClose"> <RegView></RegView> </el-drawer> ``` #### 数据： ``` drawer:false,// 默认隐藏 noDestroy:true,// 默认不销毁 ``` #### 函数： ``` // 显示抽屉 reg() { // 显示抽屉 this.drawer = true // 设置为不销毁，否则一直处于销毁状态，导致不显示 this.noDestroy = true }, handleClose(done){ // 收回抽屉 done(); // 延迟100毫秒，销毁抽屉，目的是收回抽屉动画显示后，再销毁，实现了抽屉里表单清空 setTimeout( ()=>{ this.noDestroy = false },100) }, ``` https://blog.csdn.net/m0_70726976/article/details/132731817 原文出处：/show_1IX6ov4VqCdj.html