tp-form

前端开发无可避免要遇到表单设计的问题，特别是一些和流程、报表、统计相关的需求时，可动态自定义设计的表单尤为重要。这样就能根据当前需求，设计出最符合的表单，用来收集数据。现在介绍一下摸索出来的表单设计器，采用的是Vue,ElementUI为大框架技术，还用到了Vue.draggable,vue-json-viewer,lodash等。

主题内容

• 表单设计器<MakeFormLayout></MakeFormLayout>
• 表单显示器<TpForm></TpForm>

本表单设计器主要包括以上两项内容，MakeFormLayout组件的作用是用于显示设计界面给用户，用户可以通过该组件自定义设计表单。而TpForm组件则是用于展示作用，将用户自定义设计的表单展示出来供其他用户填写。

特点

• 支持可视化设计
• 支持修改时的实时预览
• 支持ID自定义
• 支持表单校验
• 自定义正则校验
• 表单栅格化布局
• 支持数据远程获取
• 可拓展性非常强，只需在固定位置创建文件即可立即拓展

支持组件

主要分为以下几个类型组件：

输入型组件

• 单行文本
• 多行文本
• 密码输入
• 手机号输入

选择型组件

• 单项选择框（支持数据远程获取）
• 多项选择框（支持数据远程获取）
• 下拉选择框（支持数据远程获取）
• 时间选择
• 时间范围选择
• 日期选择
• 日期范围选择

按钮型组件

• 开关
• 评分
• 计数器

布局型组件

• 链接
• 分割线

项目命令

npm install
npm run serve

演示地址

跳转到演示地址