项目背景
此问题源自一个低代码项目,对于配置的页面提供了普通容器、表单容器、行列容器三种布局相关的组件。三种布局组件特征不同,却又支持相互嵌套。因此,在处理容器高度问题上较为复杂,存在多种组合情况。
需求分析
- 普通容器组件
- 高度情况最为复杂,可以设置为以下四种类型:
- 具体数值(设置多高显示多高)
- 百分比值(相较于父容器【页面组件或普通容器组件】高度的百分占比)
- 适应内容高度(最小高度84px且随内容高度增加撑大)
- 占满剩余高度(占满父容器【页面组件或普通容器组件】中剩余高度;若兄弟容器中存在多个“占满剩余高度”的普通容器,则均分父容器剩余高度且均分得到的最小高度为84px)
- 高度情况最为复杂,可以设置为以下四种类型:
- 表单容器组件的高度为适应内容高度;
- 行列容器组件的高度为适应内容高度;
另外对于是否允许出现滚动条也有区别
- 对于自适应内容高度的容器组件本身不允许出现滚动条,要求其滚动效果作用于被其撑高的父元素上;
- 对于高度固定的容器(具体数值、百分比值),当内容高度超出其本身高度时允许出现滚动条;
拿到这个需求时,就已经头大了(真的是既要,又要,还要。。。)
需求梳理
通过分析,发现表单容器组件、行列容器组件的高度情况还比较简单。最多变的就是普通容器组件(名字带有普通二字,却最事多!