vue+element-ui 自定义装修前端解决方案（上）_vue+net可视化页面装修

需求：

一、 页面显示三个区域说明
1. 动态模块（左）

2. 预览区（中）
1）展示模块的组合设置效果，模块分为固定模块与动态模块
2） 固定模块与动态模块区别

3）操作工具条（仅对动态模块）：

4） 可以拖动模块改变模块位置（仅对动态模块）
3. 设置区（右）：模块内容的设置区域
数据校验：
编辑时，校验输入的内容不符合规则，则在下方显示错误提示
保存时，对所有模块设置的数据进行校验，如果不符合规则则自动定位：预览区自动选中该模块；设置区显示该模块的设置内容，并且在设置内容下方显示错误提示

二、 前端：
1）使用vue动态组件

<component v-bind:is="moduleName "></component>
1

2） 模块文件夹划分与命名(首字母小写+驼峰)：

3） 引入模块的命名方式

命名规则：
预览模块：ModuleName + Preview
设置模块： ModuleName + Set

4）动态模块列表的信息

    dynamicModules:[
      {
        name:'PictureHotArea',
        enName:'图片热区',
        limit: 2 //限制最多添加2个
      },
      {
        name:'BlankBar',
        enName:'空白条',
        limit: 0   //0 不限制数量
      },
1
2
3
4
5
6
7
8
9
10
11

…
],

5） 模块的数据格式与显示顺序

所有的模块数据存在一个数组里，在后台预览区和前台显示顺序按数组下标从小到大来排。不另外设置字段来排序。
[
{
id:45, //模块id
name:‘BlankBar’， //模块名称
data: { // 模块的设置内容
backgroundColor:’#fefefe’,
height:20
}
}，
{
id:46, //模块id
name:‘PictureHotArea’，//模块名称
data: { // 模块的设置内容
name:‘热点图片’,
allArea:[]
}
}
]