公司项目最近提了一个很喜欢的需求，然后项目平台名字也高大上了，定制化大数据平台。根据不同的功能区，将整个页面划分为8个小的功能模块，然后在每个功能模块右上角有一个切换按钮，可以切换不同的模块。
一、问题
需要解决的问题
- 1、 模块间如何切换
- 2、 如何记忆存储客户选择的
- 3、模块弹窗的制作，可以看之前我写的Vue 弹窗姿势
产品迭代后期、可能遇到问题
- 1、不同主题页面的切换定制（子模块多达70多种，就算只是换个色板也很恐怖），而主体布局中将要存放组件的地方，我们称之为容器，容器是不变的，存放在容器中的组件是不会变化的，我们根据容器的长宽比将容器分为几类：1:1、1.2:1、1.5:1。组件需要根据不同容器进行适配
- CSS
- echarts 主题
- 2、子模块选择的拖拽功能
二、如何实现
主要分为两部分
- 子模块切换
- 用户子模块储存
.文件目录
+-- readme.md
+-- index.html
+-- src
| +-- app.vue
| +-- main.js
| +-- router
| +-- index.js
| +-- components
| +-- vbody
| +-- vtop
| +-- vcharts.vue
| +-- vprofiles.vue
| +-- vbottom
| +-- vechart
| +-- page
| +-- home
| +-- header
| +-- body
| +-- top.vue
| +-- bottom.vue
+-- main.js
管理以及储存用户子模块状态
let topBody = resolve => {require.ensure(['@/pages/home/topBody.vue'], () => {resolve(require('@/pages/home/topBody.vue'))})}
//客流分析__bar
let vtopOne = resolve => {require.ensure(['@/pages/home/vcomponent/vtopOne.vue'], () => {resolve(require('@/pages/home/vcomponent/vtopOne.vue'))})}
let vprofies = resolve => {require.ensure(['@/pages/home/vcomponent/vprofies.vue'], () => {resolve(require('@/pages/home/vcomponent/vprofies.vue'))})}
//存放当前模块状态，数组字符串
let status =[
'vtopOne',
'topBody',
'vprofies',
]
let conponets={}
//字符串转对象变量
for (var i = 0; i < status.length; i++) {
let index=status[i]
conponets[index]=eval(index)
}
export default conponets;
CSS部分
项目需求:
单页面展示（1200px、1460px、1920px宽度）在缩放过程中自适应；
由于屏幕跨度大，字体也要自适应
一、 项目演变
- 1、宽高采用百分比布局，各大小屏幕要整屏显示。
项目问题：页面布局采用百分比布局的方式，但开发过程中逐步出现了问题，如果客户打开页面并不是全屏，高度不是完全打开，主页面中的模块内容会出现很严重的形变问题，CSS很容易，但用好CSS真的不容易。好像又偏题了 * . *
- 2、Rem 自适应字体
字体设置最开始使用采用rem方案，在根文件app.vue处设置适配，不同屏幕下设置html的font-size。
@media screen and (max-width: 1079px) {html{font-size:10px;}}
@media screen and (min-width: 1080px) {html{font-size:12px;}}
@media screen and (min-width: 1270px) {html{font-size:14px;}}
@media screen and (min-width: 1460px) {html{font-size:16px;}}
@media screen and (min-width: 1599px) {html{font-size:18px;}}
@media screen and (min-width: 1910px) {html{font-size:20px;}}
使用效果：对于自适应的布局主体部分使用效果还是不错，但还有一个组件内部字体，以及大量被使用的echarts图表字体的适配问题还没有被解决
- 3、Flex布局新出路
最后在一番充（xian）电（guang）过程中，学到了新姿势,很神奇的Flex布局，之前就尝试过强迫自己去理解了学习Flex布局方式，但其实挺难理解flex布局的想法的。百分比布局用多了后，再来看Flex，就感觉Flex就跟人工智能一样，很好很强大。我们只需要去指挥Flex去对页面进行布局，而不用像以前一样，在页面上强行码砖。
使用效果：减少很大部分需要做考虑适配的地方，将更多的精力专注于想要的效果中，解放生产力。虽然现在主流浏览器对Flex支持已经很不错了，但还是会遇到一些坑，不过就性价比来说，都是小事，要根据实际开发过程中项目需求来自行判断。
- 4、被忽略的Em布局
最开始进行移动端开发的时候接触Rem顺便也接触了em，Rem是根据根元素也就是页面的html标签的font-size属性作为参考，也就是说Rem无论在什么嵌套位置都只把html作为参考。而em则是继承于父级元素的font-size，在最开始还没有进行模块化开发的时候，很难去确定我对某一个元素使用em后，能确保他是我想要的结果，可能不经意间的一个操作都会导致页面扭曲变形。但现在，少年使用模块化的你，还在犹豫什么，em 让组件更组件。主体布局作为容器可以认为它是不变的或者变化是可控的，组件字体或者其内容间距使用em布局，组件适配更完美😄
使用效果：适度使用，有利于身心健康
参考资料
CSS中强大的EM
一个完整的Flexbox指南
the end
By Rico
