介紹

自定義表單設(shè)計器，這是一個現(xiàn)代化應(yīng)用中一個加分的模塊，目前很多大型的系統(tǒng)都會存在很多表單，針對不同的客戶，可能表單都會不一樣，而且不夠靈活，可能針對不同的場景都得去定制化的開發(fā)很多不一樣的表單，因此現(xiàn)在很多大型應(yīng)用程序都提供了自定義表單的功能，今天就為大家介紹一些在github上發(fā)現(xiàn)的比較符合需求的基本實現(xiàn)，需要自己配合后臺，但是最難的部分，也就是前端設(shè)計器的部分基本上不需要動，一起來看一看！

開源項目首頁

筆者在接到項目要求后，在github上找了很久，也有好幾個版本，現(xiàn)在全部都貢獻(xiàn)出來，以便于大家參考，其中包括了PC端和移動端（分開的并不是集成在一起的，有點遺憾），有一些雖然開源，但是收費這里就不介紹了，下面是相關(guān)地址：

1、https://github.com/wxjaa/ddvue（Vue 移動端）

2、https://github.com/xiedajian/dingding（jQuery 移動端）

3、https://github.com/chrunlee/formdesigner（jQuery 移動端）

4、https://github.com/wxjaa/dingding（jQuery 移動端）

5、https://github.com/mrabit/vue-formbuilder（Vue PC）

筆者是在第一個Vue版本的基礎(chǔ)上修改的，其實大部分代碼不需要修改，不過需要自行整合金自己的項目，可以根據(jù)自己的需求進(jìn)行整合

項目介紹

因為筆者使用的是第一個，因此就直接拿第一個進(jìn)行簡單的介紹，遺憾的是沒有找到React和Angular版本的，可以根據(jù)需要自行選擇。

• 1、項目結(jié)構(gòu)

大致的項目結(jié)構(gòu)如下，這只是一個基礎(chǔ)的腳手架項目，因為開源的時間較長，腳手架使用的不是最新版，不過這不是重點：

• 2、組件部分

這部分主要就是自定義的一些控件部分，像文本框、下拉框等的渲染部分都在這里，對應(yīng)如下部分

• 3、中間界面部分

也就是進(jìn)行拖拽后的表單容器

• 4、設(shè)置部分

整個項目也就分為大致這幾個部分，由于筆者剛剛接觸Vue不久，有些地方也可能存在理解不到位的地方，這里就不在過多介紹，另外還包括頭部和按鈕部分，整個界面的核心就是中間的設(shè)計器部分，有需要的朋友自行修改即可，其中控件當(dāng)中包含的明細(xì)，相信是大家需要的！

• 5、開發(fā)

首先先克隆或者下載下來源代碼：

# 安裝依賴npm install# 啟動服務(wù)npm run dev# 構(gòu)建打包npm run build

PC版的大致預(yù)覽

可實現(xiàn)自定義表單控件,可拖拽排序，自定義屬性由于這部分筆者還沒有用到，因此簡單的一起來看看效果

總結(jié)

對于智能表單設(shè)計器，筆者目前也正在摸索如果能夠?qū)崿F(xiàn)的更好，以上的案例都提供了非常不錯的思路，非常感謝開源的作者們，如果你也有同樣的需求，可以參考以上幾個，當(dāng)然加入你有更好的思路，也可以在評論區(qū)留言分享，感謝！