form-create

具有資料收集、校驗和提交功能的表單生成器，支援雙向資料繫結和事件擴充套件，元件包含有複選框、單選框、輸入框、下拉選擇框等表單元素以及省市區三級聯動,時間選擇,日期選擇,顏色選擇,滑塊,評分,框架,樹型,檔案/圖片上傳等功能元件。

1.4.5版本已支援 iview3

Github | Gitee | Npm | 文件

圖例 demo

安裝

npm install form-create

OR

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

執行

npm run dev

OR

雙擊開啟 demo/index.html

引入

瀏覽器:

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

<!-- 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資料,不使用三級聯動不需要引入 -->
<script src="district/province_city_area.js"></script>

<!-- 模擬資料,實際使用中不需要引入 -->
<script src="demo/mock.js"></script>

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

NodeJs:

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

//三級聯動資料,不用可以不引入
import 'form-create/district/province_city_area.js'
//示例規則,實際使用中不需要引入
import 'form-create/mock.js'

Vue.use(iView);
Vue.use(formCreat)

Demo

使用 maker 生成器生成: demo

使用 json 生成: demo

各元件生成: demo

三種模式建立表單

說明:
mock() 為表單生成規則
root 為表單插入節點
$f 為表單例項

標籤模式

標籤模式下 rule 規則發生變化會實時動態渲染表單

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

let rules = mock();
new Vue({
    el:'#app1',
    data:{
        //表單生成規則
        rule:rules,
        //元件引數配置
        option:{
            //顯示錶單重置按鈕
            resetBtn:true,
            //表單提交事件
            onSubmit:function (formData) {

                //formData為表單資料

                //按鈕進入提交狀態
                this.$f.btn.loading();
                //重置按鈕禁用
                this.$f.resetBtn.disabled();

                //重置按鈕恢復正常
                //this.$f.resetBtn.disabled();
                //按鈕進入可點選狀態
                //this.$f.btn.loading(false);
            }
        },
        //初始化變數
        $f: {},
        model: {}
    },
    mounted:function () {

        //獲取表單api
        this.$f = this.$refs.fc.$f;

        //獲取雙向資料繫結的資料規則
        this.model = this.$f.model();
    }
});

構造方法

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

let rules = mock();
new Vue({
    el:'#app2',
    data:{
        //初始化變數
        $f:{},
        model:{}
    },
    mounted:function () {

        //表單插入的節點
        const root = document.getElementById('form-create');

        //$f為表單api
        this.$f = this.$formCreate(
            //表單生成規則
            rules,
            //元件引數配置
            {
                el:root,
                //顯示錶單重置按鈕
                resetBtn:true,
                //表單提交事件
                onSubmit:function (formData) {

                    //formData為表單資料

                    //按鈕進入提交狀態
                    this.$f.btn.loading();
                    //重置按鈕禁用
                    this.$f.resetBtn.disabled();

                    //重置按鈕恢復正常
                    //this.$f.resetBtn.disabled();
                    //按鈕進入可點選狀態
                    //this.$f.btn.loading(false);
                }
        });

        //獲取雙向資料繫結的資料規則
        this.model = this.$f.model();
    }

})

全域性方法

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

//表單插入的節點
var root = document.getElementById('form-create'),rules = mock();
//初始化變數
var $f = {},model = {};

//$f為表單api
$f = window.formCreate(
    //表單生成規則
    rules,
    //元件引數配置
    {
        el:root,
        //顯示錶單重置按鈕
        resetBtn:true,
        //表單提交事件
        onSubmit:function (formData) {

            //formData為表單資料

            //按鈕進入提交狀態
            $f.btn.loading();
            //重置按鈕禁用
            $f.resetBtn.disabled();

            //重置按鈕恢復正常
            //$f.resetBtn.disabled();
            //按鈕進入可點選狀態
            //$f.btn.loading(false);
        }
});

//獲取雙向資料繫結的資料規則
model = $f.model();