前端页面布局可配置

kaixinaha

一、业务需求

客户可以调整页面布局，如上图，当先从上到下的展示顺序为：轮播图 ---> 公告 ---> 筛选栏 ---> 展示列表。
如果当前客户1想要展示的页面布局，从上到下依次为：公告 ---> 轮播图 ---> 筛选栏 ---> 展示列表
客户2：公告 ---> 筛选栏 ---> 轮播图 ---> 展示列表
那么如何通过一套代码进行实现？

二、分析

1. 用户要展示的布局顺序由后端传过来， 前端需要把数据变成数组，方便遍历渲染['公告','轮播图','筛选栏','展示列表']

2. 如何按照数组的排列顺序展示组件？

   1. 可以把所有可能的展示顺序都写一套代码，然后与后端返回的展示顺序匹配，展示对应的页面布局。
   2. 思考：每套代码中的所用的组件一样，只是排列顺序不同，那么如何使用一套代码满足所有可能的布局？
   3. 在一套代码中，按照笨方法如何展示？实际上就是遍历布局可能性的过程，然后判断展示。

   <template>
     <template v-if="JSON.string(showArr) === `'['banner','notice','filter','list']'`">
       <banner>轮播图</banner>
       <notice>公告</notice>
       <filter>筛选</filter>
       <list>列表</list>
   </template>
     <template v-if="JSON.string(showArr) === `'['banner','filter','notice','list']'`">
       <banner>轮播图</banner>
       <filter>筛选</filter>
       <notice>公告</notice>
       <list>列表</list>
     </template>
     <template v-if="JSON.string(showArr) === `'['banner','list','filter','notice']'`">
       <banner>轮播图</banner>
       <list>列表</list>
       <notice>公告</notice>
       <filter>筛选</filter>
     </template>
   ...
   </template>

   类似这样的遍历

• 思考：如何在这样的列表中只展示一个对应的组件？

• v-if="item === 组件标识"

  <template>
  <banner>轮播图</banner>
  <notice>公告</notice>
  <filter>筛选</filter>
  <list>列表</list>
  </template>

  <template>
  <banner v-if="item === banner">轮播图</banner>
  <notice v-if="item === notice">公告</notice>
  <filter v-if="item === filter">筛选</filter>
  <list v-if="item === list">列表</list>
  </template>

• 遍历一下后端返回的数组，完成

  <template>
  <template v-for="item in showArr">
  <banner v-if="item === banner">轮播图</banner>
  <notice v-if="item === notice">公告</notice>
  <filter v-if="item === filter">筛选</filter>
  <list v-if="item === list">列表</list>
  </template>
  </template>

Fireworks0435

学到了，谢谢分享

ywmadonis

也可以从前端通过“拖动”相应模块实现，也就是直接拖动改变栏目顺序，需要相应的插件或者框架支持。