Implementation of form-generator and new custom components

What is form-generator? ✨

The author of form-generator introduced it like this: Element UI form design and code generator, which can run the generated code directly in the Element-based vue project; it can also export JSON forms, and use the supporting parser to parse JSON into real form.

In fact, it is a low-code platform based on the Element UI component library. By dragging and dropping, you can combine individual components into what you want, and finally generate code with one click, which can be directly put into your Vue project. , improve development efficiency.

Implementation of form-generator✨

layout

insert image description here
Left: Drag-and-drop components
Middle: Single and combined preview effects of components
Right: Configuration items for components and expressions

accomplish

Configure the component as json in config.js
Convert the json of the current component into a data format that vue render can recognize by dragging and dropping

So what kind of data format can vue render recognize?
At this time, you need to understand the render method of vue~

Render function explanation

In using the render function, a parameter createElement will be used, and this createElement parameter, in essence, is also a function, which is the tool used to build virtual dom in vue. Let's take a look around this createElement.
In the createelement method, there are three parameters:
insert image description here
1. The first parameter (required parameter): it is mainly used to provide the html content in the dom, and the type can be a string, an object or a function.
2. The second parameter (object type, optional): It is used to set some styles, attributes, parameters of the passed components, binding events, etc. in this dom.
3. The third parameter (the type is an array, and the array element type is VNode, optional): it is mainly used to set the distribution content, such as other newly added components.

Note : All vnodes in the component tree must be unique. Create a virtual node by passing in the createElement parameter, and then return the node to render.
In general, the essence of the render function is to create a virtual node.

The render method is almost understood, then let's look at the form-generator to convert the json-converted vnode
insert image description here
to this form-generator. We know the general implementation idea. Let's see how to customize components, based on the form-generator Add bricks and tiles to realize the business needs of our project~

How to customize components ✨

Add a json in src\components\generator\config.js
Create corresponding components in the src\componentnes\ directory
Globally register the newly created component in main.js
In src\views\index\RightPanel.vue bind each property value added in json in the first step

the code

//第一步：在/form-generator/src/components/generator/config.js里面加入组件json
{
    
    
    __config__: {
    
    
      label: '自定义按钮',
      showLabel: false,
      changeTag: true,
      labelWidth: null,
      tag: 'customButton',
      tagIcon: 'button',
      span: 24,
      layout: 'colFormItem',
    },
    __slot__: {
    
    
      default: '自定义按钮111'
    },
    style: {
    
    
      width: 'auto',
      height: '35px',
      margin: '20px',
      borderRadius: '30px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      color: '#FFF',
      backgroundColor: '#409EFF',
      borderColor: '#409EFF'
    },
    dataName: '自定义按钮',
    type: 'primary',
    icon: '',
    round: false,
    size: 'normal',
    site: 'center', // 按钮位置 左:flex-start 中:cneter 右:flex-end
    plain: false,
    circle: false,
    disabled: false,
    funcType: 'share'
}

//第二步：在components里面写自己的组件 
//如：/form-generator/src/components/customButton/index.vue

<template>
  <div ref="customButton" class="customButton" @click="handleShare">
    <div v-text="btnText"></div>
  </div>
</template>
    
<script>
export default {
    
    
  name: "customButton",
  data() {
    
    
    return {
    
    };
  },
  computed: {
    
    
    btnText() {
    
    
      return this.$attrs.dataName;
    },
  },
  methods: {
    
    
    handleShare() {
    
    
      this.$emit("openShare", "customButton");
    },
  },
};
</script>

//第三步：在/form-generator/src/views/index/main.js里面引入我们的自定义组件
import customButton from '@/components/customButton/index.vue'
Vue.component('customButton', customButton)

//第四步：在/form-generator/src/views/index/RightPanel.vue里面写上想要配置的属性值
<el-form-item v-if="activeData.__config__.tag === 'customButton'" label="按钮标题">
     <el-input v-model="activeData.dataName" placeholder="请输入按钮标题" @input="changeRenderKey"
     />
</el-form-item>

Note: The __config__.tag here must be unique, corresponding to the tag in json, to define the configuration items of the current component.

Problems:

Everyone must be very strange. I have only configured one attribute here, so why are there so many displayed?

In fact, in the RightPanel file, many default display attribute values are configured. You can take a look at the file
Seeing that there are not many custom components in the code, how do other components come from?
You can take a look at this file, there will be some codes for other components

The above is my understanding of form-generator. I hope it will be of some help to you who have encountered similar needs with me, and I also look forward to your guidance.

Implementation of front-end low-code form-generator and new custom components