動態生成form表單,不再為表單煩惱

kamushin233 發布于2019-08-22 14:53 / 2865人閱讀

摘要：具有數據收集校驗和提交功能的表單生成器，支持雙向數據綁定和事件擴展，組件包含有復選框單選框輸入框下拉選擇框等表單元素以及省市區三級聯動時間選擇日期選擇顏色選擇滑塊評分框架樹型文件圖片上傳等功能組件。

form-create

具有數據收集、校驗和提交功能的表單生成器，支持雙向數據綁定和事件擴展，組件包含有復選框、單選框、輸入框、下拉選擇框等表單元素以及省市區三級聯動,時間選擇,日期選擇,顏色選擇,滑塊,評分,框架,樹型,文件/圖片上傳等功能組件。

1.4.5版本已支持 iview3

Github | Gitee | Npm | form-create 文檔

圖例 demo

安裝

npm install form-create

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

運行

npm run dev

雙擊打開 demo/index.html

引入

瀏覽器:

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 規則發生變化會實時動態渲染表單

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();
    }
});

構造方法

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();
    }

})

全局方法

//表單插入的節點
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();

PHP 表單生成器

云服務器 GPU云服務器 form表單校驗 form表單插件 form表單判斷 form表單提交

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92965.html

typecho插件編寫教程3 - 保存配置

摘要：完善信息，使其更接地氣插件安裝成功，請進入設置填寫準入密鑰插件卸載成功如何保存配置準入密鑰在哪里保存當然是數據庫了。此文原本發表于我的博客老高的技術博客，歡迎和老高交流！上一節我們制作了一個裸插件，下面我們開始讓我們的插件開始工作！完善方法兩個方法我們實現activate和deactivate方法 php public static function...

HmyBmny 2019-07-01 12:13 評論0 收藏0
使用form-create輕松生成高品質的form表單[附原理圖]

摘要：目的是節省開發人員在表單頁面上耗費的時間，從而更專注于功能開發。使用可快速便捷的生成日常開發中所需的各種表單。可通過后端返回生成規則，進行渲染。 form-create 具有動態渲染、數據收集、校驗和提交功能的表單生成器，支持雙向數據綁定、事件擴展以及自定義組件，可快速生成包含有省市區三級聯動、時間選擇、日期選擇等17種功能組件。已兼容iview2.和iview3.版本 Github...

phodal 2019-08-23 14:13 評論0 收藏0
自定義表單生成器form-create v2介紹

摘要：介紹是一個可以通過生成具有動態渲染數據收集驗證和提交功能的表單生成器。并且支持生成任何組件。結合內置種常用表單組件和自定義組件，再復雜的表單都可以輕松搞定。介紹 form-create 是一個可以通過 JSON 生成具有動態渲染、數據收集、驗證和提交功能的表單生成器。并且支持生成任何 Vue 組件。結合內置17種常用表單組件和自定義組件，再復雜的表單都可以輕松搞定。文檔 | git...

lufficc 2019-08-23 18:16 評論0 收藏0
vue動態生成表單組件vue-form-maker

摘要：項目地址簡介動態生成表單組件可以根據數據配置表單使用的庫是在里一般要用到什么組件或數據都得提前聲明所以要根據數據來生成表單只能使用的函數要做這一個組件其實并不難看一下官方示例再找個組件庫差不多就能寫出來如果對項目有興趣可以或克隆項目自行研究項目地址簡介 Vue動態生成表單組件可以根據數據配置表單使用的UI庫是iView 在Vue里一般要用到什么組件或數據都得提前聲明所以要根...

cjie 2019-08-23 14:16 評論0 收藏0
長期更新，記錄一下近期工作中涉及到的內容（DvaJs Ant Design）

摘要：表單域表單一定會包含表單域，表單域可以是輸入控件，標準表單域，標簽，下拉菜單，文本域等。如果發現下拉菜單跟隨頁面滾動，或者需要在其他彈層中觸發，請嘗試使用將下拉彈層渲染節點固定在觸發器的父元素中。 DvaJs dispatch在 dva 中，connect Model 的組件通過 props 可以訪問到 dispatch，可以調用 Model 中的 Reducer 或者 Effects...

MadPecker 2019-08-26 13:54 評論0 收藏0