form-making
基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来,同步兼容pc和H5端
工具地址:(待发布) H5演示地址: (待发布)
特性
- 可视化配置页面
- 提供栅格布局,并采用flex实现对齐
- 一键预览配置的效果
- 一键生成配置json数据
- 一键生成代码,立即可运行
- 提供自定义组件满足用户自定义需求
- 提供远端数据接口,方便用户需要异步获取数据加载
- 提供功能强大的高级组件
- 支持表单验证
- 快速获取表单数据
CDN
<!-- 引入样式 --><!-- 引入组件库 -->
Install
npm install form-making -S
Quick Start
Vue// orVue
Template
设计器引用
Vue
props
Prop name | Description | Type | Default value |
---|---|---|---|
preview | 预览,头部操作按钮 | Boolean | false |
generate-json | 生成JSON | Boolean | false |
generate-code | 生成代码 | Boolean | false |
methods
Function name | Description |
---|---|
getJSON |
获取设计器生成的JSON数据 |
getHtml |
获取生成可使用的html代码 |
setJSON(value) |
根据value值设置表单设计器 |
slots
Slot name | Description |
---|---|
action | 自定义设计器操作按钮,展示在设计头部区域 |
表单渲染
通过 在线地址 或者引用设计器生成的JSON,用于表单渲染
下面就是加载对应的数据用于展示,假设你已经正确加载组件
...{returnjsonData: {} // 表单配置中生成的json数据values: {} // 表单需要显示的表单数据remoteFuncs:// 组件配置时配置的远端方法,保持和配置时输入的名称一致{// 模拟接口请求}func_test2...}methods:...// 调用此方法验证表单数据和获取表单数据this$refsgenerateForm
高级字段使用
社区资料笔记
-
Vue.Draggable (by @jianhunxia 提供)
-
jsonEditor、ace和clipboard (by @jianhunxia 提供)
支持
- 如果你发现了新的 bug,或者有新的 feature request,请新建一个 issue