一款基于Vue3.0的低代码可视化表单设计器工具，轻松搞定表单_vue可视化表单设计器

介绍​

FcDesigner Pro版是一款基于Vue3.0的低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。目前，在OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。

---

本项目采用 Vue3.0 和 ElementPlus 进行页面构建，内置多语言解决方案，支持二次扩展开发，支持自定义组件扩展。

项目分为设计器 form-create-designer 和 渲染器 form-create，用户可以通过可视化界面快速高效地创建表单，并输出为JSON。并且通过加载JSON，渲染器可以渲染并输出相应的表单。

特性​

国际化​

产品充分考虑了全球化需求，内置了中文、英文和日文三种语言选项，无论是在对外交流还是跨国业务进行中都可提供强大的语言支持，使您在应对全球化的过程中无忧无虑，轻松自如。

绑定事件​

产品提供了可配置的组件和表单事件功能，为您处理各种动态交互提供了便利。无论用户需求何种复杂度与多样性，我们都能迎刃而解，提供满足使用者需求的解决方案。

丰富的组件​

产品内置了45种常用组件，广泛覆盖多种场景需求，以满足不同的用户需求。更为重要的是，我们支持灵活扩展自定义组件，以满足您独特、个人化的需求，为您提供更丰富的使用体验。

灵活的布局​

产品提供了多种复杂表单布局方式，包括栅格、弹性盒子、表格等，这些功能让复杂的表单布局变得趋于简洁明了。此举不仅拓宽用户选择范围，更是为用户提供了贴心可靠的使用体验。

阅读模式​

致力于实现表单编辑与数据查看模式的无缝切换，高效地提升代码复用性。这种改进将大大提高生产效率，同时也能让用户在任何情况下都能享受到流畅的使用体验。

公式计算​

内置了52种常用的函数计算公式，这不仅可以大幅度提高数据分析效率，而且也能够灵活满足您在实际业务中的特定计算需求，从而保证数据的准确有效性。

可视化​

产品以可视化操作为主导，使您可以轻而易举地完成表单页面的编辑。通过直观的图形界面，无需深入繁琐复杂的代码便可完成操作，大大降低了使用门槛，让编辑工作变得更轻松、更高效。

form-create 动态表单项目自2018年开源以来，致力于低代码表单的持续研发，轻松搞定表单，让您不在为表单烦恼。历时6年低代码表单框架技术沉淀，我们经历了三次深度的框架重构。为了提升产品的质量和性能，我们的功能在不断完善和迭代。在此过程中我们深受广大用户的喜爱，并收获了众多用户的宝贵意见及反馈，在GitHub中已收获超过5000的Star数。 为了能够更好的为广大用户提供优质的功能和服务，我们专门推出了Pro版本。

GitHub 地址：GitHub - xaboy/form-create: :fire::fire::fire: 强大的动态表单生成器，通过数据驱动表单渲染，支持可视化设计。提高开发者对表单的开发效率。目前在OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。:fire::fire::fire: 强大的动态表单生成器，通过数据驱动表单渲染，支持可视化设计。提高开发者对表单的开发效率。目前在OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。 - xaboy/form-createhttps://github.com/xaboy/form-create

FcDesigner Pro版体验地址：FcDesigner Pro在线演示

FormCreate官网：FormCreate-动态表单

帮助文档：介绍 | FcDesigner Pro

功能完善​

带有多样化的布局、字段选择，支持数组、对象等复杂性表单数据的创建，基本满足任何应用场景。采用主流的拖拽操作方式，简约易用的布局，低学习成本。

永久使用权​

完成购买后，您就能享有该产品的永久使用权限。

参与更新计划​

您的宝贵建议将得到我们的优先考量。

完善的文档​

我们准备了详尽的教程文档，包含使用手册、帮助文档、API说明以及二次开发的指引。

专业团队技术支持​

购买后我们将为您提供专业的一对一技术支持，确保使用中遇到的问题能迅速得到解决。

快速上手​

安装​

1. 下载代码包
2. 在项目中创建一个fcDesignerPro目录
3. 解压代码包,将dist目录复制到刚刚创建的fcDesignerPro目录中

引入​

CDN:​

html

<link href="https://unpkg.com/element-plus/dist/index.css"></link>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<script src="https://unpkg.com/@form-create/element-ui@^3/dist/form-create.min.js"></script>
<script src="/path/to/fcDesignerPro/dist/index.umd.js"></script>
<!-- 挂载组件 -->
<script >
    //挂载 ElementUi
    app.use(ElementPlus);
    //挂载组件
    app.use(FcDesigner);
    //挂载formCreate
    app.use(FcDesigner.formCreate);
</script>

NodeJs:​

shell

npm install @form-create/element-ui@^3

js

import FcDesigner from '/path/to/fcDesignerPro/dist/index.es.js'
import ElementPlus from 'element-plus'
 
 
//挂载 ElementUi
app.use(ElementPlus)
//挂载组件
app.use(FcDesigner)
//挂载formCreate
app.use(FcDesigner.formCreate)

模块介绍​

1. 可拖拽的组件和模板区域
2. 表单中组件的树状结构数据
3. 表单的撤销和重做，防止操作出错后无法回退
4. 预览设计的表单和清空表单中的所有组件
5. 扩展操作按钮，支持扩展
6. 录入数据按钮
7. 针对表单整体的配置，支持设置表单样式尺寸，标签样式和表单事件
8. 全局样式，全局事件和全局数据源配置
9. 表单设计区域
10. 修改终端类型，支持电脑端，ipad端和手机端

操作介绍​

1. 表单中组件的树状结构数据，可以方便组件选中和组件操作
2. 针对组件的操作，支持复制，删除和添加子级
3. 控制组件的显示和隐藏状态
4. 组件区域，选中组件后会呈现蓝色边框，右侧组件配置区域会同步变化
5. 组件的操作按钮，可以复制和删除组件
6. 组件的拖拽按钮，可以通过拖拽调整组件所在的位置
7. 组件配置区域，支持基础配置，公式配置，隐藏条件配置，属性配置，组件样式配置，事件配置，验证配置

Pager

使用​

html

<fc-designer ref="designer"/>

版本对比​

在开源版本的基础上，我们为了满足更多复杂场景和提供更好的优质服务推出了Pro版本。

多语言​

通过 locale 配置项设置语言,内置了中文,英文,日文

导入语言包​

中文

js

import Zh from "@form-create/designer/locale/zh-cn.js";

英文

js

import En from "@form-create/designer/locale/en.js";

日文

js

import Jp from "@form-create/designer/locale/jp.js";

配置语言包​

js

<template>
  <fc-designer :locale="locale" />
</template>
<script>
import En from "@form-create/designer/locale/en.js";
export default {
  data(){
    return {
        locale: En,
    }
  }
}
</script>