富贵吧

 找回密码
 免费注册

手机号码,快捷登录

QQ登录

只需一步,快速开始

查看: 3|回复: 0

[资讯] 手把手带你开发一个低代码可视化平台(三)

[复制链接]

440

主题

1918

帖子

3238

积分

会员

UID
330
金币
1
威望
0
贡献
3081
宣传
0
买家
0
卖家
0
注册时间
2017-7-23
最后登录
2022-1-15

富贵吧帅哥勋章富贵吧信誉勋章

发表于 2022-1-14 23:36 | 显示全部楼层 |阅读模式

手把手带你开发一个低代码可视化平台(三)-1.jpg

我开源的商城零代码可视化搭建平台Mall-Cook受到大家喜爱,使我深受鼓励。本着授人以鱼不如授人以渔思想,在项目新建shelf分支,带大家从零开发一个自己的可视化搭建平台。

前面我们已经:

介绍了可视化搭建的架构,开发了可嵌套搭建面板 手把手带你开发一个低代码可视化平台(三)-2.jpg

介绍了物料JSON构建属性面板流水线,开发了基础类型属性的构建 手把手带你开发一个低代码可视化平台(三)-3.jpg

本章主要讲解物料JSON构建复合类型,主要包括:

对象数组对象数组 手把手带你开发一个低代码可视化平台(三)-4.jpg

老规矩,接下来我们举个例子,来看看导航栏

手把手带你开发一个低代码可视化平台(三)

导航栏接收styles(对象)、attrs(对象)、tabList(对象数组)

props: {

styles: {

type: Object,

default: ()=> {}

},

attrs: {

type: Object,

default: ()=> {}

},

tabList: {

type: Array,

default: ()=> []

}

},

下面我们来一一细看:

手把手带你开发一个低代码可视化平台(三)-6.jpg

手把手带你开发一个低代码可视化平台(三)-7.jpg

手把手带你开发一个低代码可视化平台(三)-8.jpg

复合类型由各个基础类型组装而成,因为前一章我们已经开发了属性面板解析器,所以我们只需在物料描述JSON增加child属性设置子属性,即可完成复合类型的组装

我们费了很多功夫去搭建物料JSON构建属性面板流水线的好处,在这一刻才得到体现。

标准的逻辑搭建流程,使我们可以根据需求组装任何复合类型,且只需修改JSON配置。

上一章我们已经开发完了物料JSON构建属性面板流水线,与基础类型的操作组件

手把手带你开发一个低代码可视化平台(三)-9.jpg

本章我们还需要开发嵌套基础类型来而组成复合类型的对象类型:

Object 类型操作组件Array 类型操作组件

Object类型比较简单,只需要显示label增加插槽放子属性即可

Array 类型比较复杂,我们首先遍历数组,然后在每个单项里遍历属性描述渲染对应类型的操作组件

开发JsonSchema生成器,可视化生成物料属性描述JSON,避免手动编写JSON,完成流水线的最后一环手把手带你开发一个低代码可视化平台(三)




上一篇:我,90后单身女性,曾是购物狂,现在追求不消费,一年少花19万
下一篇:在水下发现了失落的埃及城市赫拉克利翁
您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

Archiver|手机版|小黑屋|富贵吧 ( 鄂ICP备2021000478号-1 )

GMT+8, 2022-1-17 08:53 , Processed in 0.233348 second(s), 42 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表