需求:
在这里插入图片描述

一、 页面显示三个区域说明
1. 动态模块(左)
在这里插入图片描述
2. 预览区(中)
1)展示模块的组合设置效果,模块分为固定模块与动态模块
2) 固定模块与动态模块区别

在这里插入图片描述
3)操作工具条(仅对动态模块):
在这里插入图片描述

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

二、 前端:
1)使用vue动态组件

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

2) 模块文件夹划分与命名(首字母小写+驼峰):
在这里插入图片描述
3) 引入模块的命名方式
在这里插入图片描述
命名规则:
预览模块:ModuleName + Preview
设置模块: ModuleName + Set

4)动态模块列表的信息

    dynamicModules:[
      {
        name:'PictureHotArea',
        enName:'图片热区',
        limit: 2 //限制最多添加2个
      },
      {
        name:'BlankBar',
        enName:'空白条',
        limit: 0   //0 不限制数量
      },


],

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

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

Logo

前往低代码交流专区

更多推荐