0.0.1-beta.8 • Published 3 years ago
aifp-form-making v0.0.1-beta.8
aifp-form-making
tp-form
前端开发无可避免要遇到表单设计的问题,特别是一些和流程、报表、统计相关的需求时,可动态自定义设计的表单尤为重要。这样就能根据当前需求,设计出最符合的表单,用来收集数据。现在介绍一下摸索出来的表单设计器,采用的是Vue,ElementUI为大框架技术,还用到了Vue.draggable,vue-json-viewer,lodash等。
主题内容
- 表单设计器
<MakeFormLayout></MakeFormLayout>
- 表单显示器
<TpForm></TpForm>
本表单设计器主要包括以上两项内容,MakeFormLayout
组件的作用是用于显示设计界面给用户,用户可以通过该组件自定义设计表单。而TpForm
组件则是用于展示作用,将用户自定义设计的表单展示出来供其他用户填写。
特点
- 支持可视化设计
- 支持修改时的实时预览
- 支持表单校验
- 自定义正则校验
- 表单栅格化布局
- 支持数据远程获取
- 可拓展性非常强,只需在固定位置创建文件即可立即拓展
支持组件
主要分为以下几个类型组件:
输入型组件
- 单行文本
- 多行文本
- 密码输入
- 手机号输入
选择型组件
- 单项选择框(支持数据远程获取)
- 多项选择框(支持数据远程获取)
- 下拉选择框(支持数据远程获取)
- 时间选择
- 时间范围选择
- 日期选择
- 日期范围选择
按钮型组件
- 开关
- 评分
- 计数器
布局型组件
- 链接
- 分割线
项目命令
npm install
npm run serve
演示地址
开发准备
yarn install
发布流程(按顺序执行)
yarn lib
0.0.1-beta.8
3 years ago
0.0.1-beta.7
3 years ago
0.0.1-beta.6
3 years ago
0.0.1-beta.5
3 years ago
0.0.1-beta.4
3 years ago
0.0.1-beta.3
3 years ago
0.0.1-beta.2
3 years ago
0.0.1-beta.1
3 years ago