基于Taro开发的表单可视化编辑器

一、介绍

    由于之前公司开发过页面编辑器，拖拽生成常用的商城页面、但是由于前端使用Taro开发，后端使用vue开发，开发工作量就提升以1倍。

    在后面的项目中需要开发表单编辑相关的可视化，于是决定用Taro开发一个可视化的表单编辑器，这样一个组件可以同时用于编辑模式也可以用于页面显示，还能将表单自己作为表单编辑器的属性表单，实现了组件高复用率。

    TaroForm基于Taro3和flex布局，开发后将能够轻松运行在Taro支持的各个小程序、h5端、App端（目前适配h5端，其他端适配中），编辑模式使用react-dnd组件实现拖拽，可以轻松实现组件多层嵌套。

github地址

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

预览体验地址

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

二、效果预览

编辑模式

编辑模式

基础组件

基础组件

使用横向布局实现自适应

手机版

pc版

高级表单

一维数组

二维数组

已实现功能

1、基本组件

input 输入框

input 多行文本输入

select 单选

select 多选

select 下拉单选

select 下拉多选

sitch 开关

check 验证开关

steep 进步器

slider 拖动条

rate 评分

date 日期

time 时间

button 按钮

update 图片和视频上传

update 文件上传

color 颜色选择

icon-select 图标选择

area 省市区地区选择 待实现

picker 多列选择器 待实现

picker 多列关联选择器 待实现

2、展示组件

text 文本组件

image 图片组件

icon 图标组件

segment 分割线组件 待实现

布局组件

felx 栅格（flex）布局

tab tab布局

row 横向布局

column 竖向布局

panel 面板布局

compose 分组（将多个表单放在一起 默认显示一个 可以点击展开）

background 背景（有背景图的容器）

3、高级组件

object 对象表单

array 数组表单

array-one 一维数组（填写表单时增减表单）

array-two 二维数组（填写表单时增减表单）

4、表单功能

表单验证

条件显示隐藏

表单禁用（多级子表单禁用）

表单自定义背景

表单整体风格配置

5、编辑实现

可视化表单布局生成

表单预览

json数据预览

更多

详细特性无法一一截图展示，可以前往展示演示地址自行体验。

演示地址：点击前往演示地址

三、使用

1、将代码克隆到本地

2、执行 yarn 或者 npm install ，安装依赖

3、然后执行 yarn dev:h5 或者 npm run dev:h5 启动h5版本

其他版本暂时无法测试

四、最后

项目目前还是纯前端项目，功能任在完善中。

计划后期将基于nodejs和TaroForm开发一个可视化的后台管理系统，轻松实现后端功能和前端功能。