In the front-end development work, the development of forms occupies a large part. Form page and report page are the main display forms of middle and background business, but with the business becoming more and more complex, form development and maintenance has become an unavoidable pain point for front-end engineers. The main problems existing in current form development are as follows:

  1. Form state management becomes more and more difficult to maintain with the increase of business complexity, so a state management library needs to be introduced.
  2. The data structure of traditional form development is usually flat structure, which can not deal with the situation of nested complex data well. If it has to deal with, the workload will be very large.
  3. When a business needs to dynamically output forms, it has to develop a component that dynamically outputs forms based on some data protocol.
  4. When the business needs to configure the output form in the visual interface, it needs to develop a DYNAMIC output form component based on JSON.

What is VFrom

VForm, also called Variant Form, is a low-code Form based on Vue 2/Vue 3. It supports Element UI and iView UI libraries and provides rich component attribute Settings, Form interaction events and API methods. It provides front-end developers with the functions of quickly building forms, realizing form interaction and data collection.

VForm consists of a form designer, VFormDesigner, which drags components to generate jSON-formatted form objects, and a form renderer, VFormRender, which renders the form JSON into a Vue component.

Without further ado, let’s get down to business

Install VForm

npm i vform-builds
Copy the code

Use the VFormDesigner component

VFormDesigner is the form designer component of the VForm, which is used to generate the form JSON object.

1. Import and register the VForm globally

Modify the main.js of the vue project as follows (6 lines with comments) :

import Vue from 'vue'
import App from './App.vue'

import ElementUI from 'element-ui'  // Introduce the element-UI library
import VForm from 'vform-builds'  // Import the VForm library

import 'element-ui/lib/theme-chalk/index.css'  // Introduce the element-UI style
import 'vform-builds/dist/VFormDesigner.css'  // Introduce the VForm style

Vue.config.productionTip = false

Vue.use(ElementUI)  // Globally register element-ui
Vue.use(VForm)  // Register VForm globally (register v-form-designe, v-form-render, etc.)

new Vue({
  render: h= > h(App),
}).$mount('#app')
Copy the code

2. Use components in Vue templates

<template>
  <v-form-designer></v-form-designer>
</template>

<script>
  export default {
    data() {
      return{}}}</script>

<style lang="scss">
body {
  margin: 0;  /* If a vertical scroll bar appears on the page, add a row of CSS to eliminate the */
}
</style>
Copy the code

3. Add the Vue project static resource file

In order to accelerate the first page loading speed, rich text component (Vue2Editor) adopts lazy loading mode, that is, when the form contains rich text component, the browser dynamically loads the required JS file. The file for “node_modules \ vform – builds \ dist \ VFormDesigner umd. Min. 1. Js”.

During the development phase, this file needs to be copied to the static resource directory of the Vue project (usually the public directory) to the following path:

The project root directory/public/js \ VFormDesigner umd. Min. 1. Js

4. Specify the dynamic loading path for the AceEditor

The code editor component AceEditor makes extensive use of the dynamic loading of JS and CSS files only when needed. Currently, AceEditor library files are deployed on the official CDN server of vForms. If you want to use vForms in a production environment, it is recommended to deploy AceEditor privately.

Private deployment: upload all files in node_modules\ace-builds\src-min-noconflict to a Web server or CDN.

After deploying the AceEditor privately, you need to synchronize the utils/config.js file with the following line of code:

Export const ACE_BASE_PATH = ‘Deployed ACE package URL’

Use the VFormRender component

VFormRender is the form renderer component of a VForm, used to render a form JSON object into a Vue component.

Important: If the form JSON object is asynchronously obtained through the background interface, using the form-json attribute to pass the value will result in an abnormal form verification prompt. SetFormJson (XXX) method needs to be called. For details, see the document here — “Render The Form”.

1. Use VFormRender


<template>
  <div>
    <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
    </v-form-render>
    <el-button type="primary" @click="submitForm">Submit</el-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        formJson: {"widgetList": []."formConfig": {"labelWidth":80."labelPosition":"left"."size":""."labelAlign":"label-left-align"."cssCode":""."customClass":""."functions":""."layoutType":"PC"."onFormCreated":""."onFormMounted":""."onFormDataChange":""}},
        formData: {},
        optionData: {}}}.methods: {
      submitForm() {
        this.$refs.vFormRef.getFormData().then(formData= > {
          // Form Validation OK
          alert( JSON.stringify(formData) )
        }).catch(error= > {
          // Form Validation failed
          this.$message.error(error)
        })
      }
    }
  }
</script>
Copy the code

2. Add the Vue project static resource file

In order to accelerate the first page loading speed, rich text component (Vue2Editor) adopts lazy loading mode, that is, when the form contains rich text component, the browser dynamically loads the required JS file. The file is “node_modules\vform-builds\dist\ vformrender.umd.min.1.js “.

During the development phase, this file needs to be copied to the static resource directory of the Vue project (usually the public directory) to the following path:

Project root directory \public\js\ vformrender.umd.min.1.js