canvas echart v-show

（1）问题一：前几天写进度条的时候，遇到了一个bug，就是进度条加载完成之后，canvas中3D模型不展示

（2）问题二：几个月之前也是写进度条的时候，遇到bug是进度条加载完成之后，echart中的样式不会占比100%，样式有问题

问题一和问题二最起始的写法是：

<!--进度条结束之后显示主题内容-->
<div v-show="!jinduShow">
    <SideLeft></SideLeft><!--左侧导航-->
    <homeall></homeall><!--所有的信息弹框-->
    <!--主3D模型,3D组同事通过我的id把模型加进来，然后会生成一个canvas-->
    <div id="contoninerMain"></div> 
 </div>
 <!-- 进度条 -->
 <jindu v-show="jinduShow"></jindu>

<!--进度条结束之后显示主题内容-->
<div v-show="!jinduShow">
    <SideLeft></SideLeft><!--左侧导航-->
    <homeall></homeall><!--所有的信息弹框-->
    <!--echart中的内容通过router路由控制-->
    <router-view/>
 </div>
 <!-- 进度条 -->
 <jindu v-show="jinduShow"></jindu>

这个时候就会出现进度条结束之后，3D的模型不展示、echart不会占比指定容器的100%的问题

具体的原因解释我还不能清楚地说出来，按照我现在理解就是，canvas和echart这样的标签，当单纯的使用v-show来控制的时候，由于v-show是单纯的display属性，所以最起始canvas和echart找不到具体的宽高，所以才会出现这一类的问题，这也是我现在暂时的理解

我的解决方案

问题一的我用的是：opacity属性类解决的，还有其他的比如把进度条写成遮罩层来显示

<!--进度条结束之后显示主题内容-->
<div :style="{'opacity': jinduShow ? '0' : '1'}">
    <SideLeft></SideLeft><!--左侧导航-->
    <homeall></homeall><!--所有的信息弹框-->
    <!--主3D模型,3D组同事通过我的id把模型加进来，然后会生成一个canvas-->
    <div id="contoninerMain"></div> 
 </div>
 <!-- 进度条 -->
 <jindu v-show="jinduShow"></jindu>

问题二解决方案是：我又在echart标签中多加了一重判断

<!--进度条结束之后显示主题内容-->
<div v-show="!jinduShow">
    <SideLeft></SideLeft><!--左侧导航-->
    <homeall></homeall><!--所有的信息弹框-->
    <!--echart中的内容通过router路由控制-->
    <div v-show="!jinduShow">
      <router-view/>
    </div>
 </div>
 <!-- 进度条 -->
 <jindu v-show="jinduShow"></jindu>

要是大神们有什么更合理的解释欢迎告知，共同进步

猜你喜欢