昨天遇到一个奇怪问题:在搜狗浏览器、QQ浏览器 ,echarts散点图不显示。
F12发现宽度变成了0;
但在 谷歌、360浏览器 显示正常。
后来以为是 tabs切换时 v-if 、v-show渲染问题;改成 v-if 还是不行。
后来每次切换 都resize,还是不行。
最后发现 是Layout问题,删除tabs 里面的layout就好了。
<div >
<Layout>
<Sider v-bind:width="230">
<Card style="width:100%;height:100%" v-bind:padding="0" class="full-card">
<div class="nav-tree">
<Tree v-bind:data="data1" ref="tree" v-on:on-select-change="treeClick"></Tree>
</div>
</Card>
</Sider>
<Layout>
<Content >
<Tabs v-bind:value="activeKey" v-on:on-click="tabsClick" v-bind:animated="true" ref="tabs" >
<Tab-pane label="动物列表" name="key1" v-bind:index="1">
</Tab-pane>
<Tab-pane v-if="show2" label="动物详情" name="key2" v-bind:index="2">
</Tab-pane>
<Tab-pane label="入侵分布" name="key3" v-if="showMap" v-bind:index="3">
<!-- <Layout>
<Content>-->
<div ref="animalMapID" style="width:100%;height:100%"> </div>
<!-- </Content>
</Layout>-->
</Tab-pane>
</Tabs>
</Content>
</Layout>
</Layout>
</div>
树立目标,保持活力,gogogo!