成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

動態(tài)生成form表單,不再為表單煩惱

kamushin233 / 2899人閱讀

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

form-create

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

1.4.5版本已支持 iview3

Github | Gitee | Npm | form-create 文檔

圖例 demo

安裝 
npm install form-create

OR

git clone https://github.com/xaboy/form-create.git
cd form-create
npm install
運(yùn)行 
npm run dev

OR

雙擊打開 demo/index.html

引入

瀏覽器:

NodeJs:

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

//三級聯(lián)動數(shù)據(jù),不用可以不引入
import "form-create/district/province_city_area.js"
//示例規(guī)則,實(shí)際使用中不需要引入
import "form-create/mock.js"

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

使用 maker 生成器生成: demo

使用 json 生成: demo

各組件生成: demo

三種模式創(chuàng)建表單 
說明:


mock() 為表單生成規(guī)則
root 為表單插入節(jié)點(diǎn)
$f 為表單實(shí)例
標(biāo)簽?zāi)Ｊ?/b> 
標(biāo)簽?zāi)Ｊ较?rule 規(guī)則發(fā)生變化會實(shí)時動態(tài)渲染表單

    

let rules = mock();
new Vue({
    el:"#app1",
    data:{
        //表單生成規(guī)則
        rule:rules,
        //組件參數(shù)配置
        option:{
            //顯示表單重置按鈕
            resetBtn:true,
            //表單提交事件
            onSubmit:function (formData) {

                //formData為表單數(shù)據(jù)

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

                //重置按鈕恢復(fù)正常
                //this.$f.resetBtn.disabled();
                //按鈕進(jìn)入可點(diǎn)擊狀態(tài)
                //this.$f.btn.loading(false);
            }
        },
        //初始化變量
        $f: {},
        model: {}
    },
    mounted:function () {

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

        //獲取雙向數(shù)據(jù)綁定的數(shù)據(jù)規(guī)則
        this.model = this.$f.model();
    }
});
構(gòu)造方法 

    


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

        //表單插入的節(jié)點(diǎn)
        const root = document.getElementById("form-create");

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

                    //formData為表單數(shù)據(jù)

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

                    //重置按鈕恢復(fù)正常
                    //this.$f.resetBtn.disabled();
                    //按鈕進(jìn)入可點(diǎn)擊狀態(tài)
                    //this.$f.btn.loading(false);
                }
        });

        //獲取雙向數(shù)據(jù)綁定的數(shù)據(jù)規(guī)則
        this.model = this.$f.model();
    }

})
全局方法 

    


//表單插入的節(jié)點(diǎn)
var root = document.getElementById("form-create"),rules = mock();
//初始化變量
var $f = {},model = {};

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

            //formData為表單數(shù)據(jù)

            //按鈕進(jìn)入提交狀態(tài)
            $f.btn.loading();
            //重置按鈕禁用
            $f.resetBtn.disabled();

            //重置按鈕恢復(fù)正常
            //$f.resetBtn.disabled();
            //按鈕進(jìn)入可點(diǎn)擊狀態(tài)
            //$f.btn.loading(false);
        }
});

//獲取雙向數(shù)據(jù)綁定的數(shù)據(jù)規(guī)則
model = $f.model();

PHP 表單生成器

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92965.html

相關(guān)文章

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

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

    HmyBmny 評論0 收藏0

  • 使用form-create輕松生成高品質(zhì)的form表單[附原理圖]

    摘要：目的是節(jié)省開發(fā)人員在表單頁面上耗費(fèi)的時間，從而更專注于功能開發(fā)。使用可快速便捷的生成日常開發(fā)中所需的各種表單?？赏ㄟ^后端返回生成規(guī)則，進(jìn)行渲染。 form-create 具有動態(tài)渲染、數(shù)據(jù)收集、校驗(yàn)和提交功能的表單生成器，支持雙向數(shù)據(jù)綁定、事件擴(kuò)展以及自定義組件，可快速生成包含有省市區(qū)三級聯(lián)動、時間選擇、日期選擇等17種功能組件。 已兼容iview2.和iview3.版本 Github...

    phodal 評論0 收藏0

  • 自定義表單生成器form-create v2介紹

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

    lufficc 評論0 收藏0

  • vue動態(tài)生成表單組件vue-form-maker

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

    cjie 評論0 收藏0

  • 長期更新，記錄一下近期工作中涉及到的內(nèi)容（DvaJs Ant Design）

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

    MadPecker 評論0 收藏0

發(fā)表評論

0條評論

kamushin233

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<