introduce

Form create is a form generator that can generate dynamic rendering, data collection, validation and submission through JSON. It also supports the generation of any Vue component. Combined with 17 built-in common form components and custom components, even complex forms can be easily handled.

file | github

 

function

• Custom components

  • Any Vue component can be generated
  • Built in data verification
  • Easily convert to form components

• Generate forms through JSON

• Generate forms through Maker

• Powerful API to quickly manipulate forms

• Bidirectional data binding

• Event extension

• Local update

• data validation

• grid layout

• Built in components 17 common form components

Contrast 1.x

• Faster

• Smaller size

• More powerful global configuration

• Custom components are easier to extend

• Easier support for third-party UI Libraries

• Fewer bug s

Example

Creating forms through JSON  

Operation form through API  

@Form create package description

use

Taking the element UI version as an example, this paper introduces how to use form create in a project

install

npm i @form-create/element-ui

 

mount

Global registration

import formCreate form '@form-create/element-ui';

Vue.use(formCreate);

 

Local mount

import formCreate form '@form-create/element-ui';

export default {
    components:{
        formCreate:formCreaet.$form()
    }
}

Generate form

<template>
    <form-create v-model="$f" :rule="rule" @on-submit="onSubmit"></form-create>
</template>
export default {
  data () {
    return {
     //Form instance object
     $f:{},
     //Form generation rules
     rule:[
       {
          type:'input',
          field:'goods_name',
          title:'Trade name'
        },
        {
          type:'datePicker',
          field:'created_at',
          title:'Creation time'
        }
     ]
    };
  },
  methods:{
      onSubmit(formData){
          //TODO submission form
      }
  }
};

 

effect

Instance object $f

You can use $f to quickly manipulate forms, for example:

• $f.hidden: hide the specified component
• $f.validate: validate form
• $f.setValue: modify the value of the form component
• $f.append: append form component

Custom components

generate

Generate by tag

{
    type:'el-button',
    name: 'btn',
    props:{
        type:'primary',
        field:'btn',
        loading:true
    },
    children:['Loading']
}

 

Generated by template

{
    type:'template',
    name:'btn'
    template:'<el-button :loading="loading">{{text}}<el-button>',
    vm: new Vue({
      data:{
        loading:true,
        text:'Loading'
      }
    })
}

 

Convert to form component

After the custom component is converted into a form component, you can quickly operate the component through the methods of $f.formData,$f.getValue,$f.setValue,$f.disabled, etc., to achieve the same effect as the built-in component

Predefined

props

Receive the following attributes through props inside the custom component

• value   The value of the form
• disabled   Disabled state of the component

For example:

vm = Vue({
  props:{
   value:String,
   disabled:Boolean      
  }
})

 

input event

Update the value inside the component through the input event

When the component value changes, the value is updated through the input event. For example:

vm.$emit('input',newValue);

 

Mount custom components

The custom component to be generated must be mounted to the global through the Vue.component method or through the formCreate.component method

For example:

formCreate.component('TestComponent',component);

 

perhaps

Vue.component('TestComponent',component);

 

generate

The form component must define a field attribute

JSON

{
    type:'TestComponent',
    value:'test',
    field:'testField',
    title:'Custom components'
}

 

Maker

formCreate.maker.create('TestComponent','testField','Custom components').value('test')

 

Example

Customize the counter button component to obtain the number of button clicks. The function of this component is the same as that of the built-in component

formCreate.maker.template('<el-button @click="onClick" long :disabled="disabled">Counter-{{num}}</el-button>', new Vue({
  props:{
    //Predefined
    disabled:Boolean,
    value:Number,
  },
  data: function () {
    return {
        num: this.value,
    }
  },
  watch:{
    value(n){
        this.num = n;
    }
  },
  methods: {
    onClick: function () {
        this.num++;
        //Update values inside components
        this.$emit('input',this.num);
    },
  },
}), 'tmp', 'custom title').value(100).props('disabled',false)