前文回顾
我开源的商城零代码可视化搭建平台Mall-Cook受到大家喜爱,使我深受鼓励。本着授人以鱼不如授人以渔思想,在项目新建shelf分支,带大家从零开发一个自己的可视化搭建平台。
前面我们已经:
-
介绍了可视化搭建的架构,开发了可嵌套搭建面板
-
介绍了物料JSON构建属性面板流水线,开发了基础类型属性的构建
本章目的
本章主要讲解物料JSON构建复合类型,主要包括:
- 对象
- 数组
- 对象数组
解析导航栏物料
演示导航栏属性组装
老规矩,接下来我们举个例子,来看看导航栏
导航栏接收styles(对象)、attrs(对象)、tabList(对象数组)
props: {
styles: {
type: Object,
default: () => {}
},
attrs: {
type: Object,
default: () => {}
},
tabList: {
type: Array,
default: () => []
}
},
复制代码
下面我们来一一细看:
复合类型组装
复合类型由各个基础类型组装而成,因为前一章我们已经开发了属性面板解析器,所以我们只需在物料描述JSON增加child属性设置子属性,即可完成复合类型的组装
我们费了很多功夫去搭建物料JSON构建属性面板流水线的好处,在这一刻才得到体现。
标准的逻辑搭建流程,使我们可以根据需求组装任何复合类型,且只需修改JSON配置。
开发
上一章我们已经开发完了物料JSON构建属性面板流水线,与基础类型的操作组件
本章我们还需要开发嵌套基础类型来而组成复合类型的对象类型:
-
Object 类型操作组件
-
Array 类型操作组件
Object类型比较简单,只需要显示label增加插槽放子属性即可
<!-- Objct物料操作组件 -->
<template>
<div class="wrap">
<div class="wrap-label">
<span>{{label}}</span>
</div>
<div class="wrap-body">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "SchemaObject",
props: {
label: {
type: String,
default: "",
}
},
};
</script>
复制代码
Array 类型比较复杂,我们首先遍历数组,然后在每个单项里遍历属性描述渲染对应类型的操作组件
<!-- Array 物料操作组件 -->
<template>
<config-wrap :title="label">
<div class="mb10 f-grey f12">{{ mOptions.note }}</div>
<div class="nav">
<!-- 内部数据可拖拽修改顺序 -->
<draggable v-model="mValue">
<template>
<!-- 遍历数组数据 -->
<div v-for="item in mValue" :key="item.id" class="nav-item">
<!-- 遍历数组类型子属性描述 -->
<component
v-for="(val, key, index) in schema.child"
:key="index"
:is="getComponents(val.type)"
v-model="item[key]"
v-bind="val"
>
</component>
<div class="nav-delete" @click="delItem">x</div>
</div>
</template>
</draggable>
<!-- 新增数组数据 -->
<div class="nav-add" @click="addItem">新增数据</div>
</div>
</config-wrap>
</template>
<script>
import schemaMixin from "@/mixin/schemaMixin";
export default {
name: "SchemaArray",
mixins: [schemaMixin],
props: {
label: {
type: String,
default: "",
},
schema: {
type: Object,
default: () => {},
},
},
methods: {
getComponents(type) {
return `schema-${type}`;
},
// 新增数组数据,在数组新增一个空对象
addItem() {
if (this.mValue.length >= this.mOptions?.limit) {
this.$notify({
title: "无法新增",
message: `最多只能添加${this.mOptions?.limit}条数据`,
type: "warning",
});
return;
}
this.mValue.push({
id: this.$getRandomCode(6),
});
},
delItem(i) {
this.mValue.splice(i, 1);
},
},
};
</script>
复制代码
结尾
项目源码
项目代码:Mall-Cook (shelf分支)
体验地址:传送门
下一节预告
- 开发JsonSchema生成器,可视化生成物料属性描述JSON,避免手动编写JSON,完成流水线的最后一环
系列文章
- 【平台开源】基于Vue实现商城可视化无代码搭建平台 Mall-Cook
- 手把手带你开发一个低代码可视化平台(一)拖拽搭建面板开发
- 手把手带你开发一个低代码可视化平台(二) 物料JSON构建属性面板流水线
交流群
交流群二维码可在项目github首页查看Mall-Cook主页