一、介绍
由于之前公司开发过页面编辑器，拖拽生成常用的商城页面、但是由于前端使用Taro开发，后端使用vue开发，开发工作量就提升以1倍。
在后面的项目中需要开发表单编辑相关的可视化，于是决定用Taro开发一个可视化的表单编辑器，这样一个组件可以同时用于编辑模式也可以用于页面显示，还能将表单自己作为表单编辑器的属性表单，实现了组件高复用率。
TaroForm基于Taro3和flex布局，开发后将能够轻松运行在Taro支持的各个小程序、h5端、App端（目前适配h5端，其他端适配中），编辑模式使用react-dnd组件实现拖拽，可以轻松实现组件多层嵌套。
github地址
https://github.com/ShaoGongBra/taro-form
预览体验地址
二、效果预览
编辑模式
基础组件
使用横向布局实现自适应
高级表单
已实现功能
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开发一个可视化的后台管理系统，轻松实现后端功能和前端功能。
