关于萌新初识VUE的那些事 （在使用百分比制作样式式，如何获取其具体的长度（px））

直接写入正题，最近接到了一个棘手的任务，没有告诉我具体比例就让我去做页面的自适应，简单来说就是需求过来跟你说我们这个页面要做自适应的，但是我不知道自适应是什么东西，反正你要做出来这种。面对这种问题，我们不能设置在规定区间内选择不同样式进行显示，所以只能做一个整体的百分比页面去面对需求，就是不论什么样的大小，内容都按照具体的百分比大小在页面上显示（过小当然不能，所以我只做到了尽可能最小的情况下）。

但是这时遇到了一个问题，我需要在我整体百分比页面中层叠了好几层的地方插入一个图表，在Echarts中图表的大小是由内部去取值父层样式的大小进行自调节的，在写好代码之后去查看情况，发现是这样子的。

然而我所规划的外层容器大小应该是这样的（颜色区域代表我所规定的外层容器大小，这边截图取自另一块未设置区域，目标是做成两个图表的样式，这个图只是图例。）

为什么图表没有继承父容器的样式大小呢，这里就涉及到了js的异步问题，如果你是从后端转到前端来的，你肯定会非常难理解这是什么情况，因为我们在写java的时候都是同步的，就是一定要等待一件事完成后才执行下一件事，而异步的就是你要执行？那好吧，我先走，你执行完了记得赶上来。非阻塞带来的快速导致我们并不知道页面到底会何时渲染完毕，因为我们外层全部是用的百分比进行设置的。这时如果你去取值容器的大小，返回给你的事百分比的数值，而不是具体的真实大小。如图

这是因为我们写在方法里的方法先执行了，而页面还没有全部渲染完成，所以取值到的只有百分比的数值。

而此时只要我们利用生命周期的钩子，在页面渲染完毕后再去绘制图表，那么则会得到正常的样式如下

最后附上图表的绘制过程

以防万一我们在内部也进行大小的重新赋值。

最后，还是希望需求可以详细一点，这样才好做到按需开发，而不是一句话做个跟这个一模一样的，如果有遇到这样问题的同学，可以去争取一下尝试能否拿到最详细的开发数据，这样不论对需求方还是自己来说，都是好的，也能顺利按照工期完美完成工作啦！