1 Star 1 Fork 39

xcloud / tp-form

forked from underline / tp-form 
Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
Clone or download
README.md 1.61 KB
Copy Edit Web IDE Raw Blame History
underline authored 2020-09-20 17:20 . README

tp-form

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

主题内容

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

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

特点

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

支持组件

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

输入型组件

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

选择型组件

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

按钮型组件

  • 开关
  • 评分
  • 计数器

布局型组件

  • 链接
  • 分割线

项目命令

npm install
npm run serve

演示地址

跳转到演示地址

Comment ( 0 )

Sign in for post a comment

JavaScript
1
https://gitee.com/xcloud/tp-form.git
git@gitee.com:xcloud/tp-form.git
xcloud
tp-form
tp-form
master

Search