業(yè)務(wù)開發(fā)中用到了動(dòng)態(tài)標(biāo)簽，需要?jiǎng)討B(tài)構(gòu)建表單，網(wǎng)上找了一些可視化表單設(shè)計(jì)器示例，也常見與一些后臺(tái)管理中作為代碼生成器使用。

form-generator

1.簡(jiǎn)介

Element UI表單設(shè)計(jì)及代碼生成器，可將生成的代碼直接運(yùn)行在基于Element的vue項(xiàng)目中;也可導(dǎo)出JSON表單，使用配套的解析器將JSON解析成真實(shí)的表單。

• 地址：https://github.com/JakHuang/form-generator
• 預(yù)覽：https://mrhj.gitee.io/form-generator/#/
• 協(xié)議：MIT

2.預(yù)覽效果 

3.使用

一般我們使用這一類的東西都會(huì)出現(xiàn)一些需要定制化的需求，除非你要求很簡(jiǎn)單，下面我放下我二次開發(fā)處理過的目錄結(jié)構(gòu) 

Epage

Epage是一款可視化頁面配置工具。結(jié)合前端框架相關(guān)組件庫，可以實(shí)現(xiàn)復(fù)雜的界面交互。我們會(huì)根據(jù)業(yè)內(nèi)主流的組件庫做二次封裝，使成為Epage可配置的widget，目前僅針對(duì)iview組件庫做封裝，其他組件庫還在規(guī)劃中。開發(fā)者也可定制開發(fā)widget。常用于流程表單、中后臺(tái)頁面配置

• 開源地址：https://github.com/didi/epage
• 文檔地址：http://epage.didichuxing.com/usage/#epage
• 開源協(xié)議：MIT 

項(xiàng)目是基于schema的可視化頁面配置工具，目前里面基于vue 和iview框架，這個(gè)與別的有點(diǎn)不同的是加上了值邏輯處理這個(gè)在實(shí)際項(xiàng)目中還是挺有必要的。

avue-form-design

是一款基于 Avue 的表單設(shè)計(jì)器，Avue是基于Element-ui 二次封裝的。

• 項(xiàng)目地址：https://github.com/sscfaith/avue-form-design
• 預(yù)覽地址：https://form.beta.kim/
• 協(xié)議：MIT

k-form-design

基于vue和ant-design-vue實(shí)現(xiàn)的表單設(shè)計(jì)器，樣式使用less作為開發(fā)語言，主要功能是能通過簡(jiǎn)單操作來生成配置表單，生成可保存的JSON數(shù)據(jù)，并能將JSON還原成表單，使表單開發(fā)更簡(jiǎn)單更快速

• 項(xiàng)目地址：https://gitee.com/kcz66/k-form-design
• 預(yù)覽地址：http://cdn.kcz66.com/k-form-design.html
• 開源協(xié)議：MIT

其實(shí)我不太推薦目前把這個(gè)用于實(shí)際項(xiàng)目中使用，放上來的原因是這個(gè)項(xiàng)目不錯(cuò)值得學(xué)習(xí)，不推薦的原因是目前項(xiàng)目依賴的ant-design-vue 還是1.x 的版本，ant-design-vue 升級(jí)2.x 幾乎是顛覆性的改版，基于vue3.0 必須最低也是vue3.0 ,所以還是暫時(shí)不推薦直接用于項(xiàng)目中，當(dāng)然你覺得用1.x的就夠了后面也不用升級(jí)那你可以試試。 

總結(jié)：

暫時(shí)就放上以上的幾個(gè)我個(gè)人采用了第一個(gè)進(jìn)行了二次開發(fā)，網(wǎng)上還有一些沒有開源我就不放上來了，基本差不多，拖拽的幾乎都用了vuedraggable 這個(gè)拖拽庫，表單庫一般都是基于框架而寫的常見的就是element-ui、iview和ant-design-vue等這幾個(gè)常見的ui庫。