关闭el-drawer内部数据没销毁

已于 2024-07-29 09:55:42 修改
阅读量289 收藏
点赞数 3
文章标签： javascript 前端
于 2024-07-25 16:14:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013558749/article/details/140692908
版权

问题描述：
el-drawer中渲染的数据量比较大， 页面渲染有点慢。
点击关闭之后， 想再次进入el-drawer页面发现很卡，后来发现原来el-drawer在调用事件之后只是给el-drawer最外层加上了display: none; 并没有销毁整个组件。
在这里插入图片描述

下面记录下两种解决方法：

方法1：
在这里插入图片描述

方法2：
在这里插入图片描述

小白变怪兽
关注
Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭
金蕊泛流霞
09-26 3965
我们只需要设置这两个 append-to-body :close-on-click-modal="false" 属性。
elementui源码学习之仿写一个el-drawer
军火库
10-20 237
Vue 初始化时就会通过 Object.defineProperty 拦截属性的 getter 和 setter ，为对象的每个值创建一个 dep 并用 Dep.addSub() 来存储该属性值的 watcher 列表。触发依赖收集的阶段是在 beforeMount 时，它会为组件创建一个渲染 Watcher，在执行 render 的过程中就会触发对象的 getter 方法，通过dep.depend()将订阅者收集起来。
解决el-drawer关闭之后组件内数据没有完全销毁
C422805的博客
09-01 2083
关闭抽屉组件,数据没有被销毁???
element UI中关闭Drawer 抽屉时如何彻底销毁其中的内容和数据
m0_70726976的博客
09-07 1877
在Drawer组件中设置了destroy-on-close=“true”,文档说关闭时销毁 Drawer 中的元素，但是 在设置visible 抽屉的显示跟隐藏时，没有执行销毁。
点击el-drawer抽屉之外关闭问题
最新发布
coinisi_li的博客
05-08 676
遇到问题el-drawer抽屉点击空白处会关闭，与el-dialog类似。
vue el-drawer进入重新加载、关闭销毁
热门推荐
q249859693的博客
07-13 1万+
vue el-drawer进入重新加载、关闭销毁
Element-UI中的Drawer 抽屉如何关闭
qq_54180801的博客
09-10 5392
Element-UI中的Drawer 抽屉如何关闭
解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、消息弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$message、$confirm】的 遮罩层z-index问题
ylnzzl的博客
10-28 4852
解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$confirm】的 遮罩层z-index问题
elementUI_drawer踩坑_抽屉关闭问题
qq_43260366的博客
08-02 3646
做一个如上抽屉弹框，页面关闭使用的是右上角的 “X” 按钮(elementUI内部封装的)直接将抽屉写在当前页面中，关闭抽屉时–>点击页面其他地方没有任何问题；需求：当点击 ”信息详情“ 按钮时，显示一个弹框显示详情内容；当点击“X”按钮时，我们手动修改属性的值；............
el-drawer头部添加元素
08-28
然后，在使用el-drawer时，你可以审查元素并发现关闭后，弹窗只是display:none，但仍然存在于DOM结构中。因此，在弹窗中的组件不会触发生命周期钩子。为了解决这个问题，你可以使用两种方法。第一种是设置destroy-on...
DrawerLayout去除阴影，阴影部分点击不关闭抽屉并可以触发相关view，抽屉侧滑可响应关闭
07-03
DrawerLayout去除阴影，阴影部分点击不关闭抽屉并可以触发相关view，抽屉侧滑可响应关闭
element---组件--Others
weixin_45343973的博客
08-08 294
Others 一、Dialog 对话框（在保留当前页面状态的情况下，告知用户并承载相关操作） 基本用法 <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisib...
el-draw抽屉禁止点击空白区域关闭
weixin_47673852的博客
05-29 2575
el-draw抽屉禁止点击空白区域关闭及不展示标题title
如何添加关闭el-drawer功能
weixin_44099060的博客
05-14 2044
在方法中加入 this.$refs.drawerRefName.closeDrawer() 其中drawerRefName是抽屉ref属性值
el-drawer 不重复触发，el-drawer 只触发一次，el-drawer关闭后不能再次打开
killerdoubie的博客
03-17 2083
el-drawer 不重复触发，el-drawer 只触发一次，el-drawer关闭后不能再次打开
当element ui el-dialog弹窗有缓存，每次打开弹窗的时候会出问题的解决方法
Muxiu
09-15 1674
解决方法：如下是解决方案。用el-dialog 里面有一个（关闭时销毁 Dialog 中的元素）这个完全没用。其实很简单。只需要在 el-dialog 外层加一层div 然后在 div 上写上 v-if="dialogVisible"就行了。
vue el-dialog中destroy-on-close使用注意事项
leoppeng的专栏
10-28 9140
在一个el-dialog弹窗,希望：打开弹窗后创建WebSocket进行通信。关闭窗口同时关闭WebSocket。 这样实现的：el-dialog中子元素created时创建WebSocket。在组件destroyed销毁的时候。关闭WebSocket。 结果：关闭窗口的时候，发现又重新创建了连接。也就是关闭窗口的时候，执行了组件的created。有点不符合逻辑 后来查询发现： destroy-on-close：官方说明：关闭时销毁 Dialog 中的...
解决element ui drawer组件关闭后，滚动条不复原的问题
YZ_ZZZ24的博客
02-21 2734
情况一： 项目需求原因，抽屉弹窗的内容比较多，所以在样式上 使用 ::v-deep .el-drawer__body { overflow: auto; } 给组件增加滚动条， 问题出现： 每次抽屉组件关闭，再打开后滚动条的位置一直不复原。 解决： 在组件外再加一层 div 进行v-if 动态加载，这样每次动态值为false，该部分dom元素就会被销毁， 为true时，dom结构重新渲染，滚动条位置也将复原。 情况二： ...
不对el-drawer打开的晚一点echarts执行的快 如何让el-drawer打开在echarts之前
06-07
如果你希望 `el-drawer` 组件打开的时候 `echarts` 图表已经加载并且渲染完成，可以考虑将 `el-drawer` 的挂载时机推迟到 `echarts` 图表初始化完成之后。具体方法如下： 1. 在 `data` 中添加一个 `chartReady` 属性，用于标记 `echarts` 图表是否已经初始化完成。 ``` export default { data() { return { chartInstance: null, chartReady: false, drawerVisible: false }; }, // ... } ``` 2. 在 `mounted` 钩子函数中初始化 `echarts` 图表，并将 `chartReady` 设置为 `true`。 ``` export default { data() { return { chartInstance: null, chartReady: false, drawerVisible: false }; }, mounted() { const chartContainer = this.$refs.chartContainer; this.chartInstance = echarts.init(chartContainer); // ... this.chartReady = true; }, // ... } ``` 3. 在 `watch` 中监听 `chartReady` 的变化，当 `chartReady` 变为 `true` 时再显示 `el-drawer` 组件。 ``` export default { data() { return { chartInstance: null, chartReady: false, drawerVisible: false }; }, mounted() { const chartContainer = this.$refs.chartContainer; this.chartInstance = echarts.init(chartContainer); // ... this.chartReady = true; }, watch: { chartReady(val) { if (val) { this.drawerVisible = true; } } }, // ... } ``` 这样做的话，`el-drawer` 组件会等待 `echarts` 图表初始化完成之后再显示，从而避免了 `el-drawer` 打开的晚于 `echarts` 执行的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值