基于 Taro 開(kāi)發(fā)的表單可視化編輯器

介紹

—

由于之前公司開(kāi)發(fā)過(guò)頁(yè)面編輯器，拖拽生成常用的商城頁(yè)面、但是由于前端使用Taro開(kāi)發(fā)，后端使用vue開(kāi)發(fā)，開(kāi)發(fā)工作量就提升以1倍。

在后面的項(xiàng)目中需要開(kāi)發(fā)表單編輯相關(guān)的可視化，于是決定用Taro開(kāi)發(fā)一個(gè)可視化的表單編輯器，這樣一個(gè)組件可以同時(shí)用于編輯模式也可以用于頁(yè)面顯示，還能將表單自己作為表單編輯器的屬性表單，實(shí)現(xiàn)了組件高復(fù)用率。

TaroForm基于Taro3和flex布局，開(kāi)發(fā)后將能夠輕松運(yùn)行在Taro支持的各個(gè)小程序、h5端、App端（目前適配h5端，其他端適配中），編輯模式使用react-dnd組件實(shí)現(xiàn)拖拽，可以輕松實(shí)現(xiàn)組件多層嵌套。

github地址

https://github.com/ShaoGongBra/taro-form

預(yù)覽體驗(yàn)地址

http://form.t.platelet.xyz/

效果預(yù)覽—

編輯模式

基礎(chǔ)組件

使用橫向布局實(shí)現(xiàn)自適應(yīng)

高級(jí)表單

已實(shí)現(xiàn)功能

基本組件

• input 輸入框
• input 多行文本輸入
• select 單選
• select 多選
• select 下拉單選
• select 下拉多選
• switch 開(kāi)關(guān)
• check 驗(yàn)證開(kāi)關(guān)
• steep 進(jìn)步器
• slider 拖動(dòng)條
• rate 評(píng)分
• date 日期
• time 時(shí)間
• button 按鈕
• update 圖片和視頻上傳
• update 文件上傳
• color 顏色選擇
• icon-select 圖標(biāo)選擇
• area 省市區(qū)地區(qū)選擇 待實(shí)現(xiàn)
• picker 多列選擇器 待實(shí)現(xiàn)
• picker 多列關(guān)聯(lián)選擇器 待實(shí)現(xiàn)

展示組件

• text 文本組件
• image 圖片組件
• icon 圖標(biāo)組件
• segment 分割線(xiàn)組件 待實(shí)現(xiàn)

布局組件

• felx 柵格（flex）布局
• tab tab布局
• row 橫向布局
• column 豎向布局
• panel 面板布局
• compose 分組（將多個(gè)表單放在一起 默認(rèn) 默認(rèn)顯示一個(gè) 可以點(diǎn)擊展開(kāi)）
• background 背景（有背景圖的容器）

高級(jí)組件

• object 對(duì)象表單
• array 數(shù)組表單
• array-one 一維數(shù)組（填寫(xiě)表單時(shí)增減表單）
• array-two 二維數(shù)組（填寫(xiě)表單時(shí)增減表單）

表單功能

• 表單驗(yàn)證
• 條件顯示隱藏
• 表單禁用（多級(jí)子表單禁用）
• 表單自定義背景
• 表單整體風(fēng)格配置

編輯實(shí)現(xiàn)

• 可視化表單布局生成

表單預(yù)覽

• json 數(shù)據(jù)預(yù)覽

更多

詳細(xì)特性無(wú)法一一截圖展示，可以前往展示演示地址自行體驗(yàn)。

演示地址：

http://form.t.platelet.xyz/#/main/form/index

使用—

最后—

項(xiàng)目目前還是純前端項(xiàng)目，功能仍在完善中。

計(jì)劃后期將基于 nodejs 和 TaroForm 開(kāi)發(fā)一個(gè)可視化的后臺(tái)管理系統(tǒng)，輕松實(shí)現(xiàn)后端功能和前端功能。