form-create

Which has the function of data collection, check and submit the form generator, extension support two-way data binding and event, component contains a check boxes, radio buttons, input boxes, and drop-down selection box form elements as well as the provinces, three-level linkage, timing, date selection, color choices, slider, grading, framework, the tree, the function such as file/picture uploading component.

Iview3 is supported in version 1.4.5

Making | Gitee | Npm | form – the create document

legenddemo

The installation

npm install form-create
Copy the code

OR

git clone https://github.com/xaboy/form-create.git
cd form-create
npm install
Copy the code

run

npm run dev
Copy the code

OR

Double-click to open demo/index.html

The introduction of

Browser:

<! - the import Vue 2.5 - >
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

<! - the import iview 2.14.3 -- -- >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/iview.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iview.min.js"></script>

<! -- Json data of provincial and urban three-level linkage, without using three-level linkage, no need to import -->
<script src="district/province_city_area.js"></script>

<! -- Simulation data, actual use does not need to import -->
<script src="demo/mock.js"></script>

<! -- import formCreate -->
<script src="dist/form-create.min.js"></script>
Copy the code

NodeJs:

import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import formCreat from 'form-create'

// Three-level linkage data is not imported if it is not needed
import 'form-create/district/province_city_area.js'
// Example rules, which do not need to be introduced in practice
import 'form-create/mock.js'

Vue.use(iView);
Vue.use(formCreat)
Copy the code

Demo

Use maker generator to generate: Demo

Use JSON to generate: Demo

Component generation: Demo

Three modes for creating forms

Note: Mock () for form generation rule root inserts node $f for form instance

Label pattern

In label moderuleThe form is dynamically rendered in real time as rules change

<div id="app1">
    <form-create ref="fc" :rule="rule" :option="option"></form-create>
</div>
Copy the code

let rules = mock();
new Vue({
    el:'#app1'.data: {// Form generation rules
        rule:rules,
        // Configure component parameters
        option:{
            // Displays the form reset button
            resetBtn:true.// Form submission event
            onSubmit:function (formData) {

                //formData is formData

                // The button enters the submission state
                this.$f.btn.loading();
                // Reset button is disabled
                this.$f.resetBtn.disabled();

                // The reset button returns to normal
                //this.$f.resetBtn.disabled();
                // The button enters the clickable state
                //this.$f.btn.loading(false);}},// Initialize variables
        $f: {},
        model: {}},mounted:function () {

        // Get the form API
        this.$f = this.$refs.fc.$f;

        // Get the data rules for bidirectional data binding
        this.model = this.$f.model(); }});Copy the code

A constructor

<div id="app2">
    <div id="form-create"></div>
</div>
Copy the code

let rules = mock();
new Vue({
    el:'#app2'.data: {// Initialize variables
        $f:{},
        model:{}
    },
    mounted:function () {

        // Node to which the form is inserted
        const root = document.getElementById('form-create');

        //$f is the form API
        this.$f = this.$formCreate(
            // Form generation rules
            rules,
            // Configure component parameters
            {
                el:root,
                // Displays the form reset button
                resetBtn:true.// Form submission event
                onSubmit:function (formData) {

                    //formData is formData

                    // The button enters the submission state
                    this.$f.btn.loading();
                    // Reset button is disabled
                    this.$f.resetBtn.disabled();

                    // The reset button returns to normal
                    //this.$f.resetBtn.disabled();
                    // The button enters the clickable state
                    //this.$f.btn.loading(false);}});// Get the data rules for bidirectional data binding
        this.model = this.$f.model(); }})Copy the code

The global method

<div id="app3">
    <div id="form-create"></div>
</div>
Copy the code

// Node to which the form is inserted
var root = document.getElementById('form-create'),rules = mock();
// Initialize variables
var $f = {},model = {};

//$f is the form API
$f = window.formCreate(
    // Form generation rules
    rules,
    // Configure component parameters
    {
        el:root,
        // Displays the form reset button
        resetBtn:true.// Form submission event
        onSubmit:function (formData) {

            //formData is formData

            // The button enters the submission state
            $f.btn.loading();
            // Reset button is disabled
            $f.resetBtn.disabled();

            // The reset button returns to normal
            //$f.resetBtn.disabled();
            // The button enters the clickable state
            //$f.btn.loading(false);}});// Get the data rules for bidirectional data binding
model = $f.model();
Copy the code

PHP Form Generator