Vue數(shù)據(jù)驅(qū)動(dòng)表單渲染,輕松搞定form表單
form-create
具有動(dòng)態(tài)渲染、數(shù)據(jù)收集、校驗(yàn)和提交功能的表單生成器，支持雙向數(shù)據(jù)綁定、事件擴(kuò)展以及自定義組件，可快速生成包含有省市區(qū)三級(jí)聯(lián)動(dòng)、時(shí)間選擇、日期選擇等17種功能組件。
form-create 是基于 Vue開(kāi)發(fā)的開(kāi)源項(xiàng)目，可快速生成 iviewUI 的表單元素。目的是節(jié)省開(kāi)發(fā)人員在表單頁(yè)面上耗費(fèi)的時(shí)間，從而更專注于功能開(kāi)發(fā)。使用 form-creae 可快速、便捷的生成日常開(kāi)發(fā)中所需的各種表單。
下面向大家介紹一下 form-create 使用方法和生成原理
演示
生成器
如何優(yōu)雅的創(chuàng)建動(dòng)態(tài)生成一個(gè) input 輸入框。
內(nèi)置了規(guī)則生成器，用來(lái)生成組件規(guī)則的助手方法，通過(guò)鏈?zhǔn)讲僮骷纯煽焖偕蓪?duì)應(yīng)的組件規(guī)則。
json
使用 json 數(shù)據(jù)生成?？赏ㄟ^(guò)后端返回生成規(guī)則，進(jìn)行渲染。
php 表單生成器，這是我的另外一個(gè)開(kāi)源項(xiàng)目。通過(guò)php生成表單規(guī)則，前端可使用 form-create 可直接根據(jù)參數(shù)進(jìn)行表單渲染。這樣可以很好的做到前后端分離，同時(shí)后端也可以很簡(jiǎn)便的控制表單中的組件和字段。
動(dòng)態(tài)渲染
當(dāng)生成規(guī)則發(fā)生變化時(shí)，頁(yè)面也會(huì)實(shí)時(shí)更新。1.5版本新增組件緩存功能,會(huì)按需對(duì)組件進(jìn)行更新，很大的提升了渲染速度和性能。
動(dòng)態(tài)渲染實(shí)例1
動(dòng)態(tài)渲染實(shí)例2
自定義組件
form-create 支持生成任意自定義組件，包括嵌套使用 form-create。
舉例
在表單中生成一個(gè) iview 按鈕組件
生成 elementUI 組件 參考案例
使用自定義組件可提升表單的靈活性,也可以實(shí)現(xiàn)功能更復(fù)雜的表單。
實(shí)現(xiàn)原理
form-create 組件渲染/更新機(jī)制圖
form-craete 動(dòng)態(tài)渲染表單機(jī)制圖
以上就是如何使用 form-create 生成表單生成、動(dòng)態(tài)渲染、自定義組件的說(shuō)明和演示，以及form-create 項(xiàng)目的生成原理和內(nèi)部結(jié)構(gòu)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue用戶管理的增刪改查功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
vue3使用xgPalyer實(shí)現(xiàn)截圖功能的方法詳解
這篇文章主要為大家詳細(xì)介紹了如何在vue3中使用xgPalyer截圖功能,以及自定義插件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
vue項(xiàng)目實(shí)現(xiàn)表單登錄頁(yè)保存賬號(hào)和密碼到cookie功能
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)表單登錄頁(yè)保存賬號(hào)和密碼到cookie功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
Vue前端書(shū)寫(xiě)規(guī)范大全(非常詳細(xì)!)
在團(tuán)體開(kāi)發(fā)項(xiàng)目中,為了團(tuán)隊(duì)所有成員書(shū)寫(xiě)可維護(hù)的代碼,而不是一次性的代碼,讓團(tuán)隊(duì)當(dāng)中其他人看你的代碼能一目了然,下面這篇文章主要給大家介紹了關(guān)于Vue前端書(shū)寫(xiě)規(guī)范的相關(guān)資料,需要的朋友可以參考下2023-01-01
今天小編就為大家分享一篇關(guān)于Vue項(xiàng)目安裝插件并保存，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
Vue中使一個(gè)div鋪滿全屏的實(shí)現(xiàn)
最近在項(xiàng)目開(kāi)發(fā)中,就遇到了這個(gè)問(wèn)題,Vue中如何使一個(gè)div鋪滿全屏,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
Vue3.0實(shí)現(xiàn)圖片預(yù)覽組件(媒體查看器)功能
最近項(xiàng)目中有個(gè)場(chǎng)景，一組圖片、視頻、音頻、文件數(shù)據(jù)，要求點(diǎn)擊圖片可以放大預(yù)覽，左右可以切換音視頻、文件，支持鼠標(biāo)及各種鍵控制?縮放，左右旋轉(zhuǎn)，移動(dòng)等功能,這篇文章主要介紹了Vue3.0實(shí)現(xiàn)圖片預(yù)覽組件(媒體查看器),需要的朋友可以參考下2023-12-12
詳解vue + vuex + directives實(shí)現(xiàn)權(quán)限按鈕的思路
這篇文章主要介紹了詳解vue + vuex + directives實(shí)現(xiàn)權(quán)限按鈕的思路，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要為大家詳細(xì)介紹了vue遞歸實(shí)現(xiàn)自定義tree組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù)
這篇文章主要介紹了Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù)，對(duì)vue感興趣的同學(xué)，可以參考下2021-04-04