前端页面布局可配置
本帖最后由 kaixinaha 于 2022-11-13 17:14 编辑# 一、业务需求
客户可以调整页面布局，如上图，当先从上到下的展示顺序为：轮播图 ---> 公告 ---> 筛选栏 ---> 展示列表。
如果当前客户1想要展示的页面布局，从上到下依次为：公告 ---> 轮播图 ---> 筛选栏 ---> 展示列表
客户2：公告 ---> 筛选栏 ---> 轮播图 ---> 展示列表
那么如何通过一套代码进行实现？
# 二、分析
1. 用户要展示的布局顺序由后端传过来， 前端需要把数据变成数组，方便遍历渲染`['公告','轮播图','筛选栏','展示列表']`
2. 如何按照数组的排列顺序展示组件？
1. 可以把所有可能的展示顺序都写一套代码，然后与后端返回的展示顺序匹配，展示对应的页面布局。
2. 思考：每套代码中的所用的组件一样，只是排列顺序不同，那么如何使用一套代码满足所有可能的布局？
3. 在一套代码中，按照笨方法如何展示？实际上就是遍历布局可能性的过程，然后判断展示。
```html
<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>
```` 学到了，谢谢分享 也可以从前端通过“拖动”相应模块实现，也就是直接拖动改变栏目顺序，需要相应的插件或者框架支持。
页:
[1]