# Quick Start

This section will take the iview version as an example to introduce how to use form-create in the project

Other UI examples

# Install form-create

# Browser

<!-- import Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>

<!-- import iview -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iview@3.5.4/dist/styles/iview.css">
<script src="https://cdn.jsdelivr.net/npm/iview@3.5.4/dist/iview.min.js"></script>

<!-- import formCreate -->
<script src="https://cdn.jsdelivr.net/npm/@form-create/iview/dist/form-create.min.js"></script>

# NodeJs

Write the following in main.js：

import Vue from 'vue'
import iView from 'iview'
import 'iview/dist/styles/iview.css'

import formCreate from '@form-create/iview'

Vue.use(iView)
Vue.use(formCreate)

# Generate form

There are 3 ways to create a form:

Component mode, Vue prototype method, Window global method

# Component mode

Use the <form-create><form-create> tag to create a form

<div id="app1">
    <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value"></form-create>
</div>

# NodeJs

export default {
    data() {
        return {
            //Instance object
            fApi: {},
            //Form data
            value: {},
            //Form generation rules
            rule: [
                {
                    type: 'input',
                    field: 'goods_name',
                    title: 'goods_name'
                },
                {
                    type: 'datePicker',
                    field: 'created_at',
                    title: 'created_at'
                }
            ],
            //Component parameter configuration
            option: {
                //Form submission event
                onSubmit: function (formData) {
                    alert(JSON.stringify(formData))
                }
            }
        }
    }
}

# Vue Prototype method

Use the vue prototype method formCreate(rule,option) to create a form

<div id="app2">
    <div id="form-create"></div>
</div>

new Vue({
    el: '#app2',
    data: {
        fApi: {},
        model: {}
    },
    mounted: function () {
        //Node inserted into the form
        const root = document.getElementById('form-create')
        this.fApi = this.$formCreate(
            //Form generation rules
            [
                this.$formCreate.maker.input('goods_name', 'goods_name', ''),
                this.$formCreate.maker.date('created_at', 'created_at')
            ],
            //Component parameter configuration
            {
                el: root,
                //Form submission event
                onSubmit: function (formData, fApi) {
                    fApi.btn.loading()
                }
            })
    }
})

# Global Method

Use the window global method formCreate.create(rule,option) to create a form

<div id="app3">
    <div id="form-create"></div>
</div>

//Node inserted into the form
const root = document.getElementById('form-create')

//$f is the form fApi
const $f = window.formCreate.create(
    //Form generation rules
    [
        {
            type: 'input',
            field: 'goods_name',
            title: 'goods_name'
        },
        {
            type: 'datePicker',
            field: 'created_at',
            title: 'created_at'
        }
    ],
    //Component parameter configuration
    {
        el: root,
        //Show form reset button
        resetBtn: true,
        //Form submission event
        onSubmit: function (formData) {
            //Button to enter the submit state
            fApi.btn.loading()
        }
    })

← Introduction 1.x upgrade →