公司一直都有交互视觉走查的流程。最近有一个项目在走查中，UI小姐姐指出项目的布局不符合公司的。What？
还有这种操作? 我emo了，不过还是要改呀。
首先看一下UI小姐姐所谓的布局规范是什么吧。
具体来说就是：表单项目根据屏幕大小动态展示，屏幕小于1280的时候，展示2列，列间距是24px，且左右对齐。屏幕大于1280的时候，展示3列，间距同样是24px，且左右对齐，如下图所示：
1280屏宽 
大于1280屏宽 
看着还是挺简单的，该项目使用的组件库主要是基于element ui 的二次封装，所以第一时间就想到了使用，BUT，改造起来并没有这么简单呀。怎么说呢，先看看该页面的组件布局情况吧：
就是每个页面都引入pageLayout.vue公共组件，页面中写了el-form来替换pageLayout插槽部分。因此，如果要使用element-ui的栅格布局，我就要在每一个页面中，在el-form-item外面都套一层el-row/el-col，妈呀，想想工作量就巨大，因此方案一，PASS。
demo代码如下：
demo效果:
结论：
- 使用gap的优点是代码简洁，一行代码控制间距，布局灵活，根据屏幕大小，动态显示列数
- 但是，gap的缺点也很明显，第一就是每行最后一项，会根据列数，留有不同程度的空白，并不能对齐；第二就是，不支持IE，且Chronme只支持57及以上版本，因此，方案二PASS
上代码：
demo效果
通过方案三，在page-layout组件中通过css控制el-form-item的宽度，来实现批量改造，最终达到走查要求
遇到的坑：
不过在修改的时候，还是遇到了一些坑，比如，有些el-form-item是通过v-show控制的，这就导致控制的子元素没有对应视图显示，因此尽量使用v-if来控制元素是否显示吧。
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/1065.html