14 Star 131 Fork 51

underline / tp-form

加入 Gitee
与超过 800 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

tp-form

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

主题内容

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

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

特点

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

支持组件

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

输入型组件

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

选择型组件

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

按钮型组件

  • 开关
  • 评分
  • 计数器

布局型组件

  • 链接
  • 分割线

项目命令

npm install
npm run serve

演示地址

跳转到演示地址

仓库评论 ( 21 )

你可以在登录后,发表评论

简介

前端开发无可避免要遇到表单设计的问题,特别是一些和流程、报表、统计相关的需求时,可动态自定义设计的表单尤为重要。此表单设计器采用的是Vue,ElementUI为大框架技术,还用到了Vue.draggable,vue-json-viewer,lodash等 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/underline/tp-form.git
git@gitee.com:underline/tp-form.git
underline
tp-form
tp-form
master

搜索帮助