Use vue to automate forms (with code)

This time I will bring you the use of vue automated forms (with code). What are theprecautionsfor using vue automated forms. The following is a practical case, let's take a look.

Background

The B-side system has many forms, and the form may contain many fields
The form with many fields brings a large amount of HTML code
In large pieces of HTML, there are mixedparameter binding,event processingand other logic, which is not conducive to the maintenance of
technology stack Vue, Element (default form layout) is suitable for the middle and backend Rapid project development

Goal

Vue plugin that quickly generates forms through json configuration.

Design goal

1. Reduce html repeated fragments

2. The form field component is extensible

3. Events and linkages are decoupled through eventbus

4. Verification can be extended

5. Form layout can be customized

6. Visual configuration

About scheme design

npm install charlie-autoform charlie-autoform_component_lib

import AutoForm from 'charlie-autoform'; import AutoForm_component_lib from 'charlie-autoform_component_lib'; Vue.use(AutoForm); Vue.use(AutoForm_component_lib);

Basic use

demo.vue

Definition componentor component directory

Vue.$autoform.RegisterDir(()=>require.context('./components/autoform', 'c'));//目录 Vue.$autoform.Register(Vue,[Components...],{prefix: "c"}) //组件对象

cHello.vue

// PATH:/components/autoform/cHello.vue  

Result

Qualitative: Maintenance cost reduction, separation of concerns

Quantitative: Form development efficiency increased by 50%

How to use vue to view personal information and modify passwords

Summary of JS methods embedded in HTML documents

The above is the detailed content of Use vue to automate forms (with code). For more information, please follow other related articles on the PHP Chinese website!