Form-create 2.0 is released! Make it easy and don’t worry about forms

introduce

Form-create is a form generator that generates dynamic rendering, data collection, validation, and submission capabilities from JSON. It also supports generating any Vue component. With the built-in 17 common form components and custom components, no form is too complex to handle.

Document | making

function

• Custom Components

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

• Generate the form from JSON

• Form generation through Maker

• Powerful API for quick manipulation of forms

• Two-way data binding

• Event extensions

• Local update

• Data validation

• Grid layout

• Built-in components 17 common form components

Compared with 1. X

• faster

• A smaller

• More powerful global configuration

• Custom components are easier to extend

• Easier support for third-party UI libraries

• Fewer bugs

The sample

Create the form from JSON

Manipulating forms through the API

@ form – create package instructions

use

Using the Element-UI version as an example, how to use form-create in a project

The installation

npm i @form-create/element-ui
Copy the code

mount

Global registration

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

Vue.use(formCreate);
Copy the code

Local mount

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

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

To generate the form

<template>
    <form-create v-model="$f" :rule="rule" @on-submit="onSubmit"></form-create>
</template>
Copy the code

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 submits the form}}};Copy the code

The effect

Instance object $f

You can use $f to quickly manipulate forms, such as:

• $f.hidden: Hides the specified component
• $f.validate: Verify the form
• $f.setValue: Modifies the value of the form component
• $f.append: Appends the form component

Custom Components

generate

Generated by tag

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

Generate from a template

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

Convert to a form component

After a custom component is converted into a form component, it can be quickly operated by $F.framdata,$F.gete Value,$F.sete Value,$F.sabled and other methods to achieve the same effect as the built-in component

predefined

props

Receive the properties inside the custom component via props

• valueThe value of the form
• disabledThe disabled state of the component

Such as:

vm = Vue({
  props: {value:String.disabled:Boolean}})Copy the code

The input event

Update values inside the component with input events

When the component value changes, the value is updated through the input event. Such as:

vm.$emit('input',newValue);
Copy the code

Mount custom components

Custom components to be generated must be mounted globally through the Vue.component method or through the formCreate.component method

Such as:

formCreate.component('TestComponent',component);
Copy the code

or

Vue.component('TestComponent',component);
Copy the code

generate

The form component must be definedfieldattribute

JSON

{
    type:'TestComponent'.value:'test'.field:'testField'.title:'Custom Components'
}
Copy the code

Maker

formCreate.maker.create('TestComponent'.'testField'.'Custom Components').value('test')
Copy the code

The sample

Custom counter button component to get button hits. This component has the same functionality as the built-in component

formCreate.maker.template(
       
      .new Vue({
  props: {/ / a predefined
    disabled:Boolean.value:Number,},data: function () {
    return {
        num: this.value,
    }
  },
  watch:{
    value(n){
        this.num = n; }},methods: {
    onClick: function () {
        this.num++;
        // Update the values inside the component
        this.$emit('input'.this.num); ,}}}),'tmp'.'Custom title').value(100).props('disabled'.false)
Copy the code

Complete sample