电影网站 模板网络广告发布
背景
项目中采用动态给x-vue-echarts style赋值width，height的方式实现echarts图表尺寸的改变
<v-chart...autoresize></v-chart>
给v-chart添加autoresize后，在图表宽度变化，高度增加时无异常，高度减小时图表并未缩小，反而被截断了
先说结论
添加全局样式进行覆盖
div.vue-echarts-inner {height: 100% !important;
}
原理
查看vue-echarts源码
这里的inner以及useAutoresize中的root值为该dom节点
所以实际上是在监听div.vue-echarts-inner这个dom节点的尺寸变化，从而去给inner的子盒子设置width和height
下面是父盒子的css属性
下面是inner的css属性
问题就在于flex和height auto
- 父盒子为flex盒且flex-direction为column，子盒子设置flex-grow:1，那么子盒子会填满父盒子的高度
- 父盒子设置高度为height:auto，那么高度会以其子盒子内容高度为准，也就是子盒子是300px，就会把该盒子高度撑到300px
但两者在一块就有冲突
这里分为父，子，孙三个盒子
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {display: flex;flex-direction: column;background-color: red;width: 500px;height: 500px;}.me {flex: 1;width: 300px;background-color: green;height: auto;}.son {width: 100px;background-color: blue;height: 500px;}</style>
</head><body><div class="father"><div class="me"><div class="son"></div></div></div>
</body></html>
结论：
-
父盒子高度大于孙盒子时，子盒子高度跟随父盒子
-
父盒子高度小于孙盒子时，子盒子高度跟随孙盒子
回到vue-echarts场景，所以在高度减少时，inner的父盒子高度减少，但inner子盒子高度不变，所以inner盒子高度不会变，不会触发resize
解决办法：inner设置height: 100%，这样inner的高度会跟随其父盒子高度而变化，而不会受其子盒子影响