vue-form-making

简体中文 | English

基于 vue 和 element-ui 实现的可视化表单设计器，使用了最新的前端技术栈，内置了 i18n 国际化解决方案，可以让表单开发简单而高效。

• 在线预览
• 开发指南
• 组件
  • MakingForm 表单设计器（基于可视化操作快速设计出表单页面）。
  • GenerateForm 表单生成器（根据设计器中获取的配置 json 数据，快速渲染出表单页面）。
• 二次开发

该项目为基础版本，如果需要体验高级版本的功能，可以前往 高级版本，提供了更多的组件和功能，并且支持 Vue3 。

特性

• 可视化配置页面
• 提供栅格布局，并采用flex实现对齐
• 一键预览配置的效果
• 一键生成配置json数据
• 一键生成代码，立即可运行
• 提供自定义组件满足用户自定义需求
• 提供远端数据接口，方便用户需要异步获取数据加载
• 提供功能强大的高级组件
• 支持表单验证
• 快速获取表单数据
• 国际化支持

高级版本

相较于基础版本，高级版本提供了更丰富的功能：

• 页面更加美观；
• 通过点击即可快速添加字段；
• 更多的属性设置，包括数据源与表单事件；
• 更多的控件字段（子表单、自定义组件等）；
• 更多的布局容器，并且可以相互嵌套（栅格、表格、标签页）；
• 更多的API，满足更复杂的业务需求；
• 加入自定义字段，可以快速将自己开发的组件引入；
• 可快速添加自定义样式；
• 支持数据源，方便表单数据配置；
• 支持动作事件，可以让表单更加灵活配置；
• 多终端适配展示；
• 提供了 Ant Design 风格的组件（通过引入 antd vue 修改）；
• 支持 Vue3；

点击前往

第三方插件

• vuedraggable
• element-ui
• ace
• vue2-editor

Browsers support

Modern browsers and Internet Explorer 10+.

IE / Edge	Firefox	Chrome	Safari
IE10, IE11, Edge	last 2 versions	last 2 versions	last 2 versions

开源协议

MIT