介紹

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

開(kāi)源項(xiàng)目首頁(yè)

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

1、https://github.com/wxjaa/ddvue（Vue 移動(dòng)端）

2、https://github.com/xiedajian/dingding（jQuery 移動(dòng)端）

3、https://github.com/chrunlee/formdesigner（jQuery 移動(dòng)端）

4、https://github.com/wxjaa/dingding（jQuery 移動(dòng)端）

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

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

項(xiàng)目介紹

因?yàn)楣P者使用的是第一個(gè)，因此就直接拿第一個(gè)進(jìn)行簡(jiǎn)單的介紹，遺憾的是沒(méi)有找到React和Angular版本的，可以根據(jù)需要自行選擇。

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

大致的項(xiàng)目結(jié)構(gòu)如下，這只是一個(gè)基礎(chǔ)的腳手架項(xiàng)目，因?yàn)殚_(kāi)源的時(shí)間較長(zhǎng)，腳手架使用的不是最新版，不過(guò)這不是重點(diǎn)：

• 2、組件部分

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

• 3、中間界面部分

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

• 4、設(shè)置部分

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

• 5、開(kāi)發(fā)

首先先克隆或者下載下來(lái)源代碼：

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

PC版的大致預(yù)覽

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

總結(jié)

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