前端開發無可避免要遇到表單設計的問題，特別是一些和流程、報表、統計相關的需求時，可動態自定義設計的表單尤爲重要。這樣就能根據當前需求，設計出最符合的表單，用來收集數據。
今天介紹一下自己業餘時間摸索出來的表單設計器，採用的是基於Vue,ElementUI爲大框架技術，還用到了Vue.draggable,vue-json-viewer,lodash等。
主題內容
- 表單設計器<MakeFormLayout>
- 表單顯示器<TpForm>
本表單設計器主要包括以上兩項內容，MakeFormLayout組件的作用是用於顯示設計界面給用戶，用戶可以通過該組件自定義設計表單。而TpForm組件則是用於展示作用，將用戶自定義設計的表單展示出來供其他用戶填寫。
倉庫地址
https://gitee.com/underline/tp-form.git
特點
- 支持可視化設計
- 支持修改時的實時預覽
- 支持表單校驗
- 可拓展性非常強，只需在固定位置創建文件即可立即拓展
- 自定義正則校驗
- 表單柵格化佈局
支持的組件
主要分爲以下幾個類型組件：
輸入型組件
- 單行文本
- 多行文本
- 密碼輸入
- 手機號輸入
選擇型組件
- 單項選擇框
- 多項選擇框
- 下拉選擇框
- 時間選擇
- 時間範圍選擇
- 日期選擇
- 日期範圍選擇
按鈕型組件
- 開關
- 評分
- 計數器
佈局型組件
- 鏈接
- 分割線
- 柵格佈局
演示地址
https://underline.gitee.io/tp-form
GIF
