--- theme: fancy highlight: tomorrow-night-bright --- ## 前文回顾我开源的商城零代码可视化搭建平台[Mall-Cook]( https://github.com/wangyuan389/mall-cook.git )受到大家喜爱，使我深受鼓励。本着授人以鱼不如授人以渔思想，在项目新建shelf分支,带大家从零开发一个自己的可视化搭建平台。前面我们已经： - 介绍了可视化搭建的架构，开发了可嵌套搭建面板 ![可视化搭建平台架构](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5d851b57134416193818ed24ed1e71f~tplv-k3u1fbpfcp-zoom-1.image) - 介绍了物料JSON构建属性面板流水线，开发了基础类型属性的构建 ![构建流水线](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/888ec16bd1164f518c373f310c0d687c~tplv-k3u1fbpfcp-zoom-1.image) ## 本章目的本章主要讲解物料JSON构建复合类型，主要包括： - 对象 - 数组 - 对象数组 ![组件复合类型](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/06024b84fda047d69f2792f20e57e3b0~tplv-k3u1fbpfcp-zoom-1.image) ## 解析导航栏物料 ### 演示导航栏属性组装老规矩，接下来我们**举个例子**，来看看导航栏 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eff98e3a2ec9435f85fe9980c2b5eda9~tplv-k3u1fbpfcp-zoom-1.image) ![导航栏组件和它的控制面板](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2afddf890c3c4e60929be6b8146c7ce4~tplv-k3u1fbpfcp-zoom-1.image) 导航栏接收styles（对象）、attrs（对象）、tabList（对象数组） ``` props: { styles: { type: Object, default: () => {} }, attrs: { type: Object, default: () => {} }, tabList: { type: Array, default: () => [] } }, ``` 下面我们来一一细看： ![tabList（对象数组）](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/813c8b404a5e4899abb6fe11122d5408~tplv-k3u1fbpfcp-watermark.image?) ![attrs（对象）](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/359d27d9c4794b7e8f598274732aabe0~tplv-k3u1fbpfcp-watermark.image?) ![styles（对象）](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9f412d3d1be848dea882c5a2af0a66ee~tplv-k3u1fbpfcp-watermark.image?) ### 复合类型组装复合类型由各个基础类型组装而成，因为前一章我们已经开发了**属性面板解析器**,所以我们只需在**物料描述JSON**增加**child属性**设置子属性，即可完成复合类型的组装我们费了很多功夫去搭建**物料JSON构建属性面板流水线**的好处，在这一刻才得到体现。标准的逻辑搭建流程，使我们可以根据需求**组装任何复合类型**，且**只需修改JSON配置**。 ## 开发上一章我们已经开发完了物料JSON构建属性面板流水线，与基础类型的操作组件 ![属性基础类型](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5a266b33092349a29fcef75a244a9498~tplv-k3u1fbpfcp-zoom-1.image) 本章我们还需要开发**嵌套基础类型**来而组成复合类型的**对象类型**： - Object 类型操作组件 - Array 类型操作组件 Object类型比较简单，只需要显示label增加插槽放子属性即可 ``` ``` Array 类型比较复杂，我们首先遍历数组，然后在每个单项里遍历属性描述渲染对应类型的操作组件 ``` ``` ## 结尾 ### 项目源码项目代码：[Mall-Cook]( https://github.com/wangyuan389/mall-cook.git ) (shelf分支) 体验地址：[传送门]( http://110.42.184.128:7000/#/ ) ### 下一节预告 - 开发JsonSchema生成器，可视化生成物料属性描述JSON，避免手动编写JSON，完成流水线的最后一环 ![JsonSchema生成器](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0d11b7633e3145a8ae8778f273415c90~tplv-k3u1fbpfcp-zoom-1.image) ### 系列文章 - [【平台开源】基于Vue实现商城可视化无代码搭建平台 Mall-Cook]( https://juejin.cn/post/7040993073437868063 ) - [手把手带你开发一个低代码可视化平台（一）拖拽搭建面板开发]( https://juejin.cn/post/7044432832965378061 ) - [手把手带你开发一个低代码可视化平台（二）物料JSON构建属性面板流水线](https://juejin.cn/post/7046924227340926983) ### 交流群交流群二维码可在项目github首页查看[Mall-Cook]( https://github.com/wangyuan389/mall-cook.git )主页