前端開發(fā)無(wú)可避免要遇到表單設(shè)計(jì)的問題劣针，特別是一些和流程、報(bào)表亿扁、統(tǒng)計(jì)相關(guān)的需求時(shí)捺典，可動(dòng)態(tài)自定義設(shè)計(jì)的表單尤為重要。這樣就能根據(jù)當(dāng)前需求从祝，設(shè)計(jì)出最符合的表單襟己，用來收集數(shù)據(jù)。
今天介紹一下自己業(yè)余時(shí)間摸索出來的表單設(shè)計(jì)器牍陌，采用的是基于Vue,ElementUI為大框架技術(shù)擎浴，還用到了Vue.draggable,vue-json-viewer,lodash等。
主題內(nèi)容
- 表單設(shè)計(jì)器<MakeFormLayout>
- 表單顯示器<TpForm>
本表單設(shè)計(jì)器主要包括以上兩項(xiàng)內(nèi)容毒涧，MakeFormLayout組件的作用是用于顯示設(shè)計(jì)界面給用戶贮预，用戶可以通過該組件自定義設(shè)計(jì)表單。而TpForm組件則是用于展示作用契讲，將用戶自定義設(shè)計(jì)的表單展示出來供其他用戶填寫仿吞。
倉(cāng)庫(kù)地址
https://gitee.com/underline/tp-form.git
特點(diǎn)
- 支持可視化設(shè)計(jì)
- 支持修改時(shí)的實(shí)時(shí)預(yù)覽
- 支持表單校驗(yàn)
- 可拓展性非常強(qiáng)，只需在固定位置創(chuàng)建文件即可立即拓展
- 自定義正則校驗(yàn)
- 表單柵格化布局
支持的組件
主要分為以下幾個(gè)類型組件：
輸入型組件
- 單行文本
- 多行文本
- 密碼輸入
- 手機(jī)號(hào)輸入
選擇型組件
- 單項(xiàng)選擇框
- 多項(xiàng)選擇框
- 下拉選擇框
- 時(shí)間選擇
- 時(shí)間范圍選擇
- 日期選擇
- 日期范圍選擇
按鈕型組件
- 開關(guān)
- 評(píng)分
- 計(jì)數(shù)器
布局型組件
- 鏈接
- 分割線
- 柵格布局
演示地址
https://underline.gitee.io/tp-form
GIF
demo.gif
