Autor: Palapple Date: 2020-03-04 Tag: Vue, JS, React, Ant Design Pro, Formmaking
[圖片上傳失敗...(image-424ab4-1585899765538)]
關(guān)于FormMarking調(diào)研
基本情況
基于 vue 和 element-ui 實(shí)現(xiàn)的表單設(shè)計(jì)器效斑，使用了最新的前端技術(shù)棧，內(nèi)置了 i18n 國(guó)際化解決方案柱徙，可以讓表單開(kāi)發(fā)簡(jiǎn)單而高效缓屠。
組件
MakingForm 表單設(shè)計(jì)器（基于可視化操作快速設(shè)計(jì)出表單頁(yè)面，并獲取到表單配置 json 數(shù)據(jù)）护侮。
GenerateForm 表單生成器（根據(jù)設(shè)計(jì)器中獲取的配置 json 數(shù)據(jù)敌完，快速渲染出表單頁(yè)面）。
高級(jí)版本 提供了更多的組件和操作API
特性
- 可視化配置頁(yè)面
- 提供柵格布局羊初，并采用flex實(shí)現(xiàn)對(duì)齊
- 一鍵預(yù)覽配置的效果
- 一鍵生成配置json數(shù)據(jù)
- 一鍵生成代碼滨溉，立即可運(yùn)行
- 提供自定義組件滿足用戶自定義需求
- 提供遠(yuǎn)端數(shù)據(jù)接口，方便用戶需要異步獲取數(shù)據(jù)加載
- 提供功能強(qiáng)大的高級(jí)組件
- 支持表單驗(yàn)證
- 快速獲取表單數(shù)據(jù)
- 國(guó)際化支持
優(yōu)點(diǎn)
- 快速構(gòu)建表單长赞，提供柵格布局晦攒；
- 減少重復(fù)作業(yè)，高效完成表單和json雙向轉(zhuǎn)化得哆；
- 對(duì)于個(gè)性化定制脯颜，可以添加自定義class覆蓋原來(lái)的樣式，滿足業(yè)務(wù)的實(shí)際需求柳恐；
- 支持Element-ui和Ant Design-ui伐脖；
- 提供多種api接口热幔，對(duì)數(shù)據(jù)和字段進(jìn)行操作；
缺點(diǎn)
- 高級(jí)組件數(shù)量不夠多讼庇；原生antd of vue 中包含57個(gè)組件绎巨，還有很多高級(jí)組件，類似card蠕啄，list等等未完成场勤；
- 對(duì)于中臺(tái)應(yīng)用來(lái)說(shuō)，Table歼跟，Card和媳，Search等經(jīng)常使用的組件暫時(shí)沒(méi)有，等后續(xù)更新哈街；
應(yīng)用場(chǎng)景
Element-UI版本（實(shí)際使用圖）
- 表單生成器（ GenerateForm）
[圖片上傳失敗...(image-ff32ca-1585899765538)]
- 表單設(shè)計(jì)器 （MakingForm）
[圖片上傳失敗...(image-cd5c0a-1585899765538)]
Antd版本（使用vue cli3實(shí)現(xiàn)）
[圖片上傳失敗...(image-4549d6-1585899765538)]
PS
- antd組件版本暫時(shí)只在高級(jí)版本才有留瞳；產(chǎn)品正在進(jìn)一步兼容antd的高級(jí)組件，提升容量骚秦；
- 通過(guò)跟Ant Design Pro配合Element-ui搭配完美她倘，Antd組件兼容性待測(cè)量；
- 建議搭配第三方組件使用：
