# 快速上手

本节将以iview版本为例介绍如何在项目中使用 form-create

其他 UI 示例

# 引入 form-create

# 浏览器

<!-- 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

在 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)

# 生成表单

可通过以下3种方式创建表单:

组件模式, Vue 原型方法, Window 全局方法

# 组件模式

使用 <form-create></form-create> 标签创建表单

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

# NodeJs

export default {
    data() {
        return {
            //实例对象
            fApi: {},
            //表单数据
            value: {},
            //表单生成规则
            rule: [
                {
                    type: 'input',
                    field: 'goods_name',
                    title: '商品名称'
                },
                {
                    type: 'datePicker',
                    field: 'created_at',
                    title: '创建时间'
                }
            ],
            //组件参数配置
            option: {
                //表单提交事件
                onSubmit: function (formData) {
                    alert(JSON.stringify(formData))
                }
            }
        }
    }
}

# Vue 原型方法

使用 vue 原型方法$formCreate(rule,option) 创建表单

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

new Vue({
    el: '#app2',
    data: {
        fApi: {},
        model: {}
    },
    mounted: function () {
        //表单插入的节点
        const root = document.getElementById('form-create')
        //fApi为表单api
        this.fApi = this.$formCreate(
            //表单生成规则
            [
                this.$formCreate.maker.input('商品名称', 'goods_name', ''),
                this.$formCreate.maker.date('创建时间', 'created_at')
            ],
            //组件参数配置
            {
                el: root,
                //表单提交事件
                onSubmit: function (formData, fApi) {
                    fApi.btn.loading()
                }
            })
    }
})

# 全局方法

使用 window 全局方法formCreate.create(rule,option)创建表单

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

//表单插入的节点
const root = document.getElementById('form-create')

//$f为表单api
const $f = window.formCreate.create(
    //表单生成规则
    [
        {
            type: 'input',
            field: 'goods_name',
            title: '商品名称'
        },
        {
            type: 'datePicker',
            field: 'created_at',
            title: '创建时间'
        }
    ],
    //组件参数配置
    {
        el: root,
        //显示表单重置按钮
        resetBtn: true,
        //表单提交事件
        onSubmit: function (formData) {
            //按钮进入提交状态
            fApi.btn.loading()
        }
    })

← 介绍 1.x升级 →