TpForm可视化表单设计器

前端开发无可避免要遇到表单设计的问题，特别是一些和流程、报表、统计相关的需求时，可动态自定义设计的表单尤为重要。这样就能根据当前需求，设计出最符合的表单，用来收集数据。 今天介绍一下自己业余时间摸索出来的表单设计器，采用的是基于Vue,ElementUI为大框架技术，还用到了Vue.draggable,vue-json-viewer,lodash等。 主题内容 表单设计器 表单显示器 本表单设计器主要包括以上两项内容，MakeFormLayout组件的作用是用于显示设计界面给用户，用户可以通过该组件自定义设计表单。而TpForm组件则是用于展示作用，将用户自定义设计的表单展示出来供其他用户填写。 仓库地址 https://gitee.com/underline/tp-form.git 特点 支持可视化设计 支持修改时的实时预览 支持表单校验 可拓展性非常强，只需在固定位置创建文件即可立即拓展 表单栅格化布局（未来支持） 自定义正则校验（未来支持） 支持的组件 主要分为以下几个类型组件： 输入型组件 单行文本 多行文本 密码输入 手机号输入 选择型组件 单项选择框 多项选择框 下拉选择框 时间选择 时间范围选择 日期选择 日期范围选择 按钮型组件 开关 评分 计数器 布局型组件 链接 展示 demo

本文章由javascript技术分享原创和收集