tab下图表展示宽高为0的问题

tab下,默认展示第一个tab(最新订阅),第二个tab是echarts,需要动态获取父级div的宽高并赋值到图表的DOM的宽高。在实际开发过程中,发现无论如何延迟处理,或者mounted,第二个tab的宽高都是0。


问题的具体根源,暂不清楚。在调试过程中发现,如果先渲染“订阅量统计”的tab,图表可以正常显示。但是不是一开始渲染,切换的时候查看会发现宽高为0。自己分析,应该是页面初始化的时候,渲染了第一个tab,第二个tab是渲染了,但是因为是隐藏的display=none,因此宽高都是0。导致子组件无论如何打印,其父级节点的宽高都是0。
解决思路是:希望一开始只渲染第一个展示的tab,其他的tab等点击的时候再进行渲染查询。因此代码解决方案如下。每一个子组件添加v-if属性。

tab下图表展示宽高为0的问题的更多相关文章
- new Image 读取宽高为0——onload
获取图片一张图片的大小 let img = new Image() img.src = imgUrl if ( img.width != 375 || img.height != 200 ) { me ...
- Adatper中获取宽高为0的问题
但是我们想在getView()中获取ImageView的宽和高存在问题,在getView()里面刚开始显示item的时候利用ImageView.getWidth() 获取的都是0,为什么刚开始获取不到 ...
- android onCreate中获取view宽高为0的解决方法
view.post(runnable) 通过post可以将一个runnable投递到消息队列的尾部,然后等待UI线程Looper调用此runnable的时候,view也已经初始化好了. view.po ...
- jquery 获取图片宽高为0的问题
原理:页面加载完了,图片不一定加载完了. $(function(){ $("img").on("load",function(){ //核心 var w = $ ...
- 【经验总结】关于使用某些第三方插件库元素设置display:none后重新show不显示的问题;(display、opacity、宽高0的使用场景)
display:none 直接取消元素所占用的位置(但是元素还是存在的),后面元素看他就相当于不存在了: opacity:0 隐藏,但是其依旧占用位置: height.width:0 和displa ...
- 【Flutter学习】页面布局之宽高尺寸处理
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- 【图像处理】Golang 获取JPG图像的宽高
一.背景 有些业务需要判断图片的宽高,来做一些图片相关缩放,旋转等基础操作. 但是图片缩放,旋转,拼接等操作需要将图片从 JPG 格式转成 RGBA 格式操作,操作完毕后,再转回 JPG 图片. 那如 ...
- CCLabel在最大宽度已知的情况下如何获取实际宽高
当前环境在cocos2.2.6, 在UI摆图中,会遇到一种情况就是 设定了label的最大宽度MAX_WIDTH,但label的内容是动态的,如何在label输入了文字之后获取label的真实宽高? ...
- vue 动态获取div宽高有时候为0的情况
项目背景: 需要使用echarts进行图表展示.由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中. 需要使用 this.$nextTick(() => { }) ...
随机推荐
- steps 步骤条、时间轴
steps 步骤条.时间轴:http://www.fxss5201.cn/project/plugin/steps/1.0/ Github地址:https://github.com/fxss5201/ ...
- [ERROR] Plugin org.apache.maven.plugins:maven-clean-plugin:2.5 or one of its dependencies could not be resolved: Cannot access nexus-aliyun (http://maven.aliyun.com/nexus/content/groups/public) in off
这个错误是将work offline打勾引起的. 这个是离线工作模式,相当于断网,远程的jar会拉不下来.
- python中输入三个整数x,y,z,请把这三个数由小到大输出。
输入三个整数x,y,z,请把这三个数由小到大排序,再把数组由大到小排序,再输出最大值和最小值! #定义一个空数组 numbers = [] #循环遍历,下面的4是控制循环次数 for i in ran ...
- 思维体操: HDU1008 Elevator
Elevator Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
- git将某个分支的代码完全覆盖另一个分支
假设每个人有个开发分支,想隔一段时间就把自己的开发分支上的代码保持和测试分支一直,则需要如下操作: 1.我想将test分支上的代码完全覆盖dev分支,首先切换到dev分支git checkout de ...
- 2018-8-10-VisualStudio-修改配色
title author date CreateTime categories VisualStudio 修改配色 lindexi 2018-08-10 19:16:52 +0800 2018-2-1 ...
- PAT Advanced 1027 Colors in Mars (20 分)
People in Mars represent the colors in their computers in a similar way as the Earth people. That is ...
- linux下vim如何清空一个文件?
这是一个很巧妙的方法.如何来清空一个文件里的内容呢! 很简单,但确很实用: echo " " > filename(文件名称); 一句话就可以搞定.
- bzoj4817 & loj2001 [Sdoi2017]树点涂色 LCT + 线段树
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4817 https://loj.ac/problem/2001 题解 可以发现这个题就是 bzo ...
- MySQL数据库2表的增删改查
目录 一.数据表(文件): 1.1增 1.2查看表内数据 1.3改 1.4删除列表 1.5查看库内列表及表结构 1.6复制表结构 二.列类型:(*********) 2.1数字 2.2字符串 2.3时 ...