These reviews

My open source Mall zero-code visualization platform, Mall-Cook, is loved by everyone, which makes me deeply encouraged. In line with the idea that it is better to teach people how to fish than to teach them how to fish, we set up a shelf branch of the project to develop a visual platform of our own from scratch.

Previously we have:

  • This paper introduces the framework of visual construction and develops the panel of nested construction

  • The pipeline of material JSON building attribute panel is introduced, and the construction of basic type attribute is developed

This ZhangMu

This chapter mainly explains the composition type of material JSON, including:

  • object
  • An array of
  • An array of objects

Parse navigation bar materials

Demonstrates navigation bar property assembly

As usual, let’s take a look at the navigation bar, for example

Navigation bar accepts styles, attrs, tabList

  props: {
    styles: {
      type: Object,
      default: () => {}
    },
    attrs: {
      type: Object,
      default: () => {}
    },
    tabList: {
      type: Array,
      default: () => []
    }
  },
Copy the code

Let’s take a closer look:

Composite type assembly

Composite types are assembled from various base types. Since we developed the property panel parser in the previous chapter, we can assemble composite types by adding the child property setting child to the material description JSON

This is the moment when the benefits of building a pipeline for material JSON properties panels come into play.

The standard logic scaffolding process allows us to assemble any compound type on demand, with only modifications to the JSON configuration.

The development of

In the previous chapter we developed a pipeline of material JSON building properties panels, with basic types of action components

In this chapter we also need to develop nested base types to form composite types of objects:

  • Object Operation components

  • Array type Operation component

The Object type is relatively simple. You only need to display label to add slots for sub-attributes

<! -- Objct Material handling component --> <template> <div class="wrap"> <div class="wrap-label"> <span>{{label}}</span> </div class="wrap-body"> <slot></slot> </div> </div> </template> <script> export default { name: "SchemaObject", props: { label: { type: String, default: "", } }, }; </script>Copy the code

The Array type is more complex, so we first iterate over the Array and then iterate over the attribute description rendering action component of the corresponding type in each item

<! -- Array material handling component --> <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"> <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"> add data </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}`; }, // Add an empty object to the array addItem() {if (this.mvalue.length >= this.moptions? .limit) {this. $notify({title: "can't add ", message: 'can't add ${this.mOptions? . Limit} data ', type: "warning",}); return; } this.mValue.push({ id: this.$getRandomCode(6), }); }, delItem(i) { this.mValue.splice(i, 1); ,}}}; </script>Copy the code

At the end

Program source code

Project Code: Mall-Cook (Shelf Branch)

Experience address: portal

Next video

  • Develop JSON Schema generator, visually generate material attribute description JSON, avoid manual writing JSON, and complete the last link of the pipeline

series

  • [Open source platform] Based on Vue to achieve Mall visualization without code to build a platform mall-cook
  • Hand – in – hand guide you to develop a low code visual platform (a) drag – and – drop build panel development
  • Hand in hand with you to develop a low code visualization platform (two) material JSON build property panel pipeline

Communication group

The qr code of the exchange group can be viewed on the main page of the project github