background
- There are many forms in the system at the end B, and the forms may contain many fields
- Forms with lots of fields lead to large chunks of HTML code
- In large chunks of HTML, the logic of parameter binding, event handling, and so on is mixed up and not maintainable
- The technology stack Vue, Element(default form layout) is suitable for rapid development of mid – to back-end projects
The target
A vue plugin that quickly generates forms through JSON configuration.
Design goals
- Reduce HTML repetitive fragments
- The form field component is extensible
- Event and linkage are decoupled through eventBus
- Check extensibility
- The form layout is customizable
- Visual configuration
General scheme design
use
The installation
npm install charlie-autoform charlie-autoform_component_lib
Copy the code
Use documentation: doc
!!!!!!!!! Please ignore the development guide at the top of the document
The introduction of the plugin
import AutoForm from 'charlie-autoform';
import AutoForm_component_lib from 'charlie-autoform_component_lib';
Vue.use(AutoForm);
Vue.use(AutoForm_component_lib);
Copy the code
The basic use
demo.vue
<template>
<div>
<auto-form ref="tagForm1" :model="model1" :fields="fields1" :layout="layout">
<el-form-item class="clearfix">
<el-button type="primary"</el-button> </el-button> </el-button> </el-form-item> </auto-form> </div> </template> <script>export default {
data() {
return {
model2: {
name: ' '.type: []
},
layout2: {
align: 'left',
labelWidth: '100px',
custom: false, // Whether to customize the layout inline:true}, fields2: [{key:'name'.type: 'input',
templateOptions: {
label: 'Approver'
}
},
{
key: 'region'.type: 'select',
templateOptions: {
label: 'Active area',
placeholder: 'Please select active area',
options: [
{
label: 'Zone one',
value: 'shanghai'
},
{
label: 'Region two',
value: 'beijing'}], validators:[// validators // {required:true,message:'mandatory'} / /""}}]}; }}; </script>Copy the code
The final result
Add a custom component or component directory
Vue.$autoform.RegisterDir(()=>require.context('./components/autoform'.'c')); Vue / / directory.$autoform.Register(Vue,[Components...] ,{prefix:"c"}) // Component objectCopy the code
cHello.vue
/ / PATH: / components/autoform/cHello vue < template > < div > < div > < p > the basic variables can get through it"mixins"</p> <p> Custom sub-component: Hello</p> <p> Current field: {{field}}</p> <p> Entire model: {{model}}</p> <p> Current model: {{model [field name]}} < / p > < p > layout: {{layout}} < / p > < p > field configuration related to: {{to}}</p> </div> </div> </template> <script> import {baseField} from"charlie-autoform";
export default {
mixins: [baseField],
name: 'cHello'.data () {
return {};
},
methods: {},
mounted(){//this.eventBus}}; </script>Copy the code
results
More than one system is currently in use
- Qualitative: Maintenance cost reduction, separation of concerns
- Quantitative: Form development efficiency increased by 50%
feedback
Welcome to github