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

phodal 發(fā)布于2019-08-23 14:13 / 1286人閱讀

摘要：目的是節(jié)省開發(fā)人員在表單頁面上耗費的時間，從而更專注于功能開發(fā)。使用可快速便捷的生成日常開發(fā)中所需的各種表單。可通過后端返回生成規(guī)則，進行渲染。

form-create

具有動態(tài)渲染、數(shù)據(jù)收集、校驗和提交功能的表單生成器，支持雙向數(shù)據(jù)綁定、事件擴展以及自定義組件，可快速生成包含有省市區(qū)三級聯(lián)動、時間選擇、日期選擇等17種功能組件。

已兼容iview2.和iview3.版本

Github | 文檔歡迎大家收藏、點贊，多多支持。

form-create 是基于 Vue開發(fā)的開源項目，可快速生成 iviewUI 的表單元素。目的是節(jié)省開發(fā)人員在表單頁面上耗費的時間，從而更專注于功能開發(fā)。使用 form-creae 可快速、便捷的生成日常開發(fā)中所需的各種表單。

下面向大家介紹一下 form-create 使用方法和生成原理演示 生成器

如何優(yōu)雅的創(chuàng)建動態(tài)生成一個 input 輸入框。

內(nèi)置了規(guī)則生成器，用來生成組件規(guī)則的助手方法，通過鏈式操作即可快速生成對應的組件規(guī)則。

json

使用 json 數(shù)據(jù)生成?？赏ㄟ^后端返回生成規(guī)則，進行渲染。

php 表單生成器，這是我的另外一個開源項目。通過php生成表單規(guī)則，前端可使用 form-create 可直接根據(jù)參數(shù)進行表單渲染。這樣可以很好的做到前后端分離，同時后端也可以很簡便的控制表單中的組件和字段。

動態(tài)渲染

當生成規(guī)則發(fā)生變化時，頁面也會實時更新。1.5版本新增組件緩存功能,會按需對組件進行更新，很大的提升了渲染速度和性能。

自定義組件

form-create 支持生成任意自定義組件，包括嵌套使用 form-create。

舉例

在表單中生成一個 iview 按鈕組件

生成 elementUI 組件參考案例

使用自定義組件可提升表單的靈活性,也可以實現(xiàn)功能更復雜的表單。

實現(xiàn)原理

form-create 組件渲染/更新機制圖

form-craete 動態(tài)渲染表單機制圖

以上就是如何使用 form-create 生成表單生成、動態(tài)渲染、自定義組件的說明和演示，以及form-create 項目的生成原理和內(nèi)部結構。如果您有任何意見或者建議可以通過留言、issue、[email protected] 郵箱來與我聯(lián)系。???

參考

Vue

iviewUI

Vue渲染函數(shù) & JSX

云服務器 GPU云服務器 html的form表單 js提交本form表單的數(shù)據(jù) form表單校驗 form表單插件

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

轉載請注明本文地址：http://systransis.cn/yun/100297.html

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

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

lufficc 2019-08-23 18:16 評論0 收藏0
動態(tài)生成form表單,不再為表單煩惱

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

kamushin233 2019-08-22 14:53 評論0 收藏0
PHP快速生成現(xiàn)代化form表單，就是好用

摘要：表單生成器，使用快速創(chuàng)建現(xiàn)代化的表單，包含復選框單選框輸入框下拉選擇框等元素以及省市區(qū)三級聯(lián)動時間選擇日期選擇顏色選擇文件圖片上傳等功能。 form-builder PHP表單生成器，使用PHP快速創(chuàng)建現(xiàn)代化的form表單，包含復選框、單選框、輸入框、下拉選擇框等元素以及,省市區(qū)三級聯(lián)動,時間選擇,日期選擇,顏色選擇,文件/圖片上傳等功能。 Github地址 | Composer地址 ...

notebin 2019-07-01 10:13 評論0 收藏0
使用form-create動態(tài)生成vue組件,支持json格式

摘要：說明文檔示例商品名稱商品加個創(chuàng)建時間是否顯示顯示不顯示通過建立一個虛擬的方式生成自定義組件生成上面的代碼是通過生成器動態(tài)生成一個正在加載的按鈕組件上面的代碼是通過方式動態(tài)生成一個按鈕組件修改可以通過一下兩種方式動態(tài)修改組件的配置項通 [github] | [說明文檔] 示例 showImg(https://segmentfault.com/img/remote/1460000017...

happyhuangjinjin 2019-08-23 14:48 評論0 收藏0
關于跨域問題

摘要：面試必考題吧，所以在這會詳細介紹以下內(nèi)容跨域產(chǎn)生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優(yōu)缺點什么是跨域由于瀏覽器廠商對安全性的考慮，提出了瀏覽器的同源策略做為解決方案。面試必考題吧，所以在這會詳細介紹以下內(nèi)容跨域產(chǎn)生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優(yōu)缺點什么是跨域由于瀏覽器廠商對安全性的考慮，提出了瀏覽器的同源策略做為解決方案。它...

ZoomQuiet 2019-08-23 16:25 評論0 收藏0