介紹

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

開源項目首頁

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

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版本的基礎上修改的，其實大部分代碼不需要修改，不過需要自行整合金自己的項目，可以根據自己的需求進行整合

項目介紹

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

• 1、項目結構

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

• 2、組件部分

這部分主要就是自定義的一些控制項部分，像文本框、下拉框等的渲染部分都在這裡，對應如下部分

• 3、中間介面部分

也就是進行拖拽後的表單容器

• 4、設置部分

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

• 5、開發

首先先克隆或者下載下來原始碼：

# 安裝依賴
npm install

# 啟動服務
npm run dev

# 構建打包
npm run build

PC版的大致預覽

可實現自定義表單控制項,可拖拽排序，自定義屬性由於這部分筆者還沒有用到，因此簡單的一起來看看效果

總結

對於智能表單設計器，筆者目前也正在摸索如果能夠實現的更好，以上的案例都提供了非常不錯的思路，非常感謝開源的作者們，如果你也有同樣的需求，可以參考以上幾個，當然加入你有更好的思路，也可以在評論區留言分享，感謝！