vue使用v-if切换tab时echarts不渲染、内存泄露
之前自己写tab,出现了很多bug,这里记录一下。一、v-show子组件和插件如果放在tab2加载会失效,除非首次加载的时候加载tab2。转换思路,用v-if。二、v-if(1)页面切换回去时echarts不会渲染这时候在切换tab的点击事件中使用$nextTick()回调echarts函数就可以解决问题。// 切换tab1和tab2changeTab(active) {this.activeNa
·
之前自己写tab,出现了很多bug,这里记录一下。
一、v-show
子组件和插件如果放在tab2加载会失效,除非首次加载的时候加载tab2。
转换思路,用v-if。
二、v-if
(1)页面切换回去时echarts不会渲染
这时候在切换tab的点击事件中使用$nextTick()回调echarts函数就可以解决问题。
// 切换tab1和tab2
changeTab(active) {
this.activeName = active;
if (this.activeName == 0) {
//回调echarts
this.$nextTick(() => {
this.draw_echarts();
});
} else {}
},
(2)因为页面内容过多,tab1的echarts泄露到tab2上,挤占tab2空间
这时候在切换tab的点击事件中打印tab1中id为"mychart"的div,是可以获取到html片段的,虽然tab2上并没有这个div。
这时候需要先用getInstanceByDom()获取到echarts实例,再用dispose()将其销毁。
// 切换tab1和tab2
changeTab(active) {
this.activeName = active;
if (this.activeName == 0) {
//回调echarts
this.$nextTick(() => {
this.draw_echarts();
});
} else {
console.log(document.getElementById("mychart"));
this.echarts.getInstanceByDom(document.getElementById("mychart")).dispose();
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)