Vue 开源项目低代码表单设计器 FcDesigner v3.3 版本发布!兼容Element Plus/Ant Design/Vant,支持PC/移动端

xaboy2025-07-16 13:13

FcDesigner 是一款基于 Vue 的低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。并广泛应用于在政务系统、OA 系统、ERP 系统、电商系统、流程管理等领域。

源码地址: Github | Gitee | 文档 | 在线演示

核心功能🔥

  • 内置表单多语言体系，轻松打破语言隔阂。
  • 提供 30+ 常用组件，涵盖表单组件、布局组件、辅助类组件等各类实用模块。
  • 支持灵活扩展自定义组件，个性化开发轻松拿捏。支持二次扩展开发，深度定制不在话下。
  • 支持组件样式配置，动态调整组件尺寸、颜色、间距等样式属性。
  • 支持事件交互配置，灵活配置组件事件响应逻辑，实现复杂交互场景。
  • 表单大纲、操作记录、数据录入、组件生成、事件配置、表单验证、栅格布局、表格布局等。

3.3 版本更新内容

✨ 新增功能:

  • 增强表格布局组件，支持批量操作格子样式，清空，合并等操作，双击快速添加内容，支持通过拖动设置格子宽和高

  • 操作权限控制

    • config 增加 componentPermission 配置，可精确控制每个组件的可见配置项和允许的操作
    • config 增加 beforeRemoveRule 和 beforeActiveRule 回调控制组件是否可以删除和选中
    • 拖拽规则增加 allowDragTo 配置项，控制当前组件允许拖入到那些组件中
    • 拖拽规则增加 maxChildren 配置项，限制子组件拖入数量
    • 拖拽规则和 config 增加 checkDrag 回调控制组件是否可以拖入

  • 增加手写签名组件和标题组件

  • 左右两侧板块增加展开收齐按钮

  • 完善快捷键

  • 增加 getHtml 方法，导出 Html

    // 将表单导出为 HTML
    this.$refs.designer.getHtml()

  • 增加标题和手写签名组件

  • 远程请求支持前置处理回调

  • 完善表格表单组件，新增最小行，是否可删除开关，是否可新增开关和标题位置的配置项

  • 增加 previewSubmit 和 previewReset 事件，预览弹窗表单提交和重置时触发

  • config 增加 beforeRemoveRule 和 beforeActiveRule 回调控制组件是否可以删除和选中

  • 表单增加 beforeSubmit 事件

  • 增加 changeField 事件，监听组件的字段 ID 变化

  • 增加 showMenuBar 配置项，控制是否显示最左侧菜单栏

  • 增加 showPreviewBtn 配置项，控制是否显示预览按钮

  • 增加 exitConfirm 配置项，控制关闭设计器时是否弹出确认操作弹窗

🔧 功能优化:

  • 隐藏多语言后同步隐藏多语言选择
  • 修改上传组件事件配置参数 (⚠️不兼容)
  • 表单事件列表增加事件是否定义的状态
  • menu 增加 before 参数，可以显示在顶部
  • 优化事件配置
  • 修改弹出框宽度为 1080px
  • 支持配置事件的描述
  • 优化设计器样式

🐞 问题修复：

  • ✅ 修复 预览 json 时函数解析问题
  • ✅ 修复 事件保存时可能报错问题
  • ✅ 修复 自定义属性可能保存失败问题
  • ✅ 修复 默认表单配置项可能不生效问题

配置面板

您可以根据业务需求随心定制设计器界面和功能组合啦，系统会自动生成对应的配置参数，简直不要太方便！

  • @form-create/designer ElementPlus/ElementUI表单设计器 💻

  • @form-create/antd-designer AntDesignVue表单设计器(Vue3) 💻

  • @form-create/vant-designer Vant移动端表单设计器(Vue3) 📱

作者：无懈可击

链接：https://juejin.cn/post/7505633505980907529

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Element UI 版本表单设计器

本项目采用 Vue2.7 和 Element UI 进行页面构建，内置多语言解决方案，支持二次扩展开发，支持自定义组件扩展。演示站

安装

要开始使用 @form-create/designer，首先需要将其安装到您的项目中。可以通过 npm 安装：

sh 复制代码 
npm install @form-create/designer@^1
npm install @form-create/element-ui@^2.7
npm install element-ui

如已安装旧版本渲染器，请执行以下命令更新至最新版：

sh 复制代码 
npm update @form-create/element-ui@^2.7

请检查当前 Vue 版本，若版本低于 2.7，请执行以下升级命令：

sh 复制代码 
npm update vue@^2.7

引入

Node.js 引入

对于 Node.js 项目，您需要通过 npm 安装相关依赖，并在您的项目中引入并配置它们。

js 复制代码 
import Vue from 'vue';
import FcDesigner from '@form-create/designer';
import ELEMENT from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 使用 Element UI
Vue.use(ELEMENT);
// 使用 form-create 和 designer
Vue.use(FcDesigner);
Vue.use(FcDesigner.formCreate);

CDN 引入

如果您希望通过 CDN 方式引入 FcDesigner ，请确保先引入 Vue.js 和 Element UI。然后引入 @form-create/element-ui 和 @form-create/designer，并在 Vue 实例中进行配置

html 复制代码 
<!-- 引入 Vue.js -->
<script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script>
<!-- 引入 Element UI 样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入 Element UI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入 form-create 和 designer -->
<script src="https://unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/designer/dist/index.min.js"></script>
<div id="app">
    <fc-designer height="100vh"></fc-designer>
</div>
<script>
    Vue.use(FcDesigner);
    Vue.use(FcDesigner.formCreate);
    new Vue().$mount('#app');
</script>

使用

在 Vue 组件中，您可以像下面这样使用 fc-designer 组件：

html 复制代码 
<template>
    <fc-designer ref="designer" height="100vh" />
</template>

Element Plus 版本表单设计器

@form-create/designer 支持 Vue 3 环境，以下是如何在 Vue 3 项目中安装和使用该库的指南。

演示站

安装

首先，安装 @form-create/designer 的 Vue 3 版本

sh 复制代码 
npm install @form-create/designer@^3
npm install @form-create/element-ui@^3
npm install element-plus

如已安装旧版本渲染器，请执行以下命令更新至最新版：

sh 复制代码 
npm update @form-create/element-ui@^3

引入

Node.js 引入

对于使用 Node.js 的项目，按照以下步骤在您的 Vue 3 项目中引入并配置：

js 复制代码 
import { createApp } from 'vue';
import FcDesigner from '@form-create/designer';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
// 创建 Vue 应用
const app = createApp(App);
// 使用 Element Plus 和 FcDesigner
app.use(ElementPlus);
app.use(FcDesigner);
app.use(FcDesigner.formCreate);
// 挂载应用
app.mount('#app');

CDN 引入

如果您选择使用 CDN，可以按照以下步骤在 HTML 文件中引入相关依赖：

html 复制代码 
<!-- 引入 Element Plus 样式 -->
<link href="https://unpkg.com/element-plus/dist/index.css" rel="stylesheet" />
<!-- 引入 Vue 3 -->
<script src="https://unpkg.com/vue"></script>
<!-- 引入 Element Plus -->
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<!-- 引入 form-create 和 designer -->
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/designer@next/dist/index.umd.js"></script>
<div id="app">
    <fc-designer height="100vh"></fc-designer>
</div>
<script>
    const { createApp } = Vue;
    const app = createApp({});
    app.use(ElementPlus);
    app.use(FcDesigner);
    app.use(FcDesigner.formCreate);
    app.mount('#app');
</script>

使用

在 Vue 3 组件中，您可以通过以下方式使用 fc-designer 组件：

html 复制代码 
<template>
    <fc-designer ref="designer" height="100vh" />
</template>
<script setup>
    import { ref } from 'vue';
    // 可以在此处获取设计器实例或进行其他操作
    const designer = ref(null);
</script>

AntDesignVue 版本 PC 端表单设计器

演示站

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

安装

首先，安装 @form-create/antd-designer

sh 复制代码 
npm install @form-create/antd-designer@^3
npm install @form-create/ant-design-vue@^3
npm install ant-design-vue

如已安装旧版本渲染器，请执行以下命令更新至最新版：

sh 复制代码 
npm update @form-create/ant-design-vue@^3

引入

Node.js 引入

对于使用 Node.js 的项目，按照以下步骤在您的 Vue 3 项目中引入并配置：

js 复制代码 
import FcDesigner from '@form-create/antd-designer'
import antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
// 创建 Vue 应用
const app = createApp(App);
app.use(antd)
app.use(FcDesigner)
app.use(FcDesigner.formCreate)
// 挂载应用
app.mount('#app');

CDN 引入

如果您选择使用 CDN，可以按照以下步骤在 HTML 文件中引入相关依赖：

html 复制代码 
<link rel="stylesheet" href="https://unpkg.com/ant-design-vue@4/dist/reset.css"></link>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"></link>
<!-- 引入 Vue 及所需组件 -->
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
<script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/ant-design-vue@4/dist/antd.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>


<!-- 引入 form-create 及 fcDesigner -->
<script src="https://unpkg.com/@form-create/ant-design-vue@^3/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@^3/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/antd-designer@^3/dist/index.umd.js"></script>


<div id="app">
    <fc-designer height="100vh"></fc-designer>
</div>
<!-- 挂载组件 -->
<script>
    // 创建 Vue 应用实例
    const app = Vue.createApp({});
    // 挂载 AntDesignVue
    app.use(antd);
    // 挂载 fcDesignerPro 组件
    app.use(FcDesigner);
    // 挂载 formCreate
    app.use(FcDesigner.formCreate);
    // 挂载 Vue 应用
    app.mount('#app');
</script>

使用

在 Vue 3 组件中，您可以通过以下方式使用 fc-designer 组件：

html 复制代码 
<template>
    <fc-designer ref="designer" height="100vh" />
</template>
<script setup>
    import { ref } from 'vue';
    // 可以在此处获取设计器实例或进行其他操作
    const designer = ref(null);
</script>

移动端表单设计器

演示站

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

安装

首先，安装 @form-create/vant-designer

sh 复制代码 
npm install @form-create/vant-designer@^3
npm install @form-create/element-ui@^3
npm install @form-create/vant@^3
npm install element-plus
npm install vant

如已安装旧版本渲染器，请执行以下命令更新至最新版：

sh 复制代码 
npm update @form-create/element-ui@^3
npm update @form-create/vant@^3

引入

Node.js 引入

对于使用 Node.js 的项目，按照以下步骤在您的 Vue 3 项目中引入并配置：

js 复制代码 
import FcDesignerMobile from '@form-create/vant-designer'
import ELEMENT from 'element-plus';
import vant from 'vant';
import 'vant/lib/index.css';
import 'element-plus/dist/index.css';
// 创建 Vue 应用
const app = createApp(App);
app.use(ELEMENT)
app.use(vant)
app.use(FcDesignerMobile)
app.use(FcDesignerMobile.formCreate)
// 挂载应用
app.mount('#app');

CDN 引入

如果您选择使用 CDN，可以按照以下步骤在 HTML 文件中引入相关依赖：

html 复制代码 
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"></link>
<link rel="stylesheet" href="https://unpkg.com/vant@4/lib/index.css"/>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<script src="https://unpkg.com/vant@4/lib/vant.min.js"></script>
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant-designer@next/dist/index.umd.js"></script>
<div id="app">
    <fc-designer-mobile height="100vh"></fc-designer-mobile>
</div>
<script>
    const { createApp } = Vue;
    const app = createApp({});
    app.use(ElementPlus);
    app.use(vant);
    app.use(FcDesignerMobile);
    app.use(FcDesignerMobile.formCreate);
    app.mount('#app');
</script>

使用

在 Vue 3 组件中，您可以通过以下方式使用 fc-designer 组件：

html 复制代码 
<template>
    <fc-designer-mobile ref="designer" height="100vh" />
</template>
<script setup>
    import { ref } from 'vue';
    // 可以在此处获取设计器实例或进行其他操作
    const designer = ref(null);
</script>

获取设计表单的数据

在表单设计器中，可以通过以下方法获取表单的生成规则和配置，这些数据通常会被保存到数据库中，以便后续加载和回显。

js 复制代码 
//获取表单的生成规则
const ruleJson = this.$refs.designer.getJson();
//获取表单的配置
const optionsJson = this.$refs.designer.getOptionsJson();


//todo 保存JSON数据到数据库中

这些数据可以用来保存到数据库中，确保表单的状态和配置可以在页面刷新或重新加载时恢复。

回显设计表单

当需要回显设计好的表单时，您需要加载之前保存的 JSON 规则和配置，并将其应用到设计器中。

js 复制代码 
//todo 加载表单JSON规则


//回显表单
this.$refs.designer.setOptions(optionsJson);
this.$refs.designer.setRule(ruleJson);

通过这些方法，可以将之前保存的表单规则和配置应用到设计器中，从而恢复表单的状态。

表单渲染

要渲染表单，您需要挂载 form-create 到 Vue 应用中，并加载表单规则和配置。

js 复制代码 
//从设计器中导入 formCreate
import {formCreate} from '@form-create/designer';
//挂载 formCreate
app.use(formCreate);

表单渲染示例

html 复制代码 
<template>
    <div id="app">
        <form-create v-model="formData" v-model:api="fApi" :rule="rule" :option="option"></form-create>
    </div>
</template>
<script>
    import {formCreate} from '@form-create/designer';
    export default {
        data() {
            return {
                //实例对象
                fApi: {},
                //表单数据
                formData: {},
                //表单生成规则
                rule: [],
                //组件参数配置
                option: {}
            }
        },
        beforeCreate(){
            const rule,option;
            // todo 加载表单JSON规则
            this.rule = formCreate.parseJson(rule);
            this.option = formCreate.parseJson(option);
        }
    }
</script>

动态加载和保存表单配置

可以通过 API 请求动态加载表单规则和配置，并将表单数据保存到服务器。

js 复制代码 
import axios from 'axios';


// 加载表单配置
async function loadFormConfig() {
    try {
        const response = await axios.get('/api/form-config');
        return response.data;
    } catch (error) {
        console.error('加载表单配置失败', error);
        return { rule: [], option: {} };
    }
}


// 保存表单配置
async function saveFormConfig(ruleJson, optionsJson) {
    try {
        await axios.post('/api/form-config', { rule: ruleJson, options: optionsJson });
    } catch (error) {
        console.error('保存表单配置失败', error);
    }
}
相关推荐
Agatha方艺璇15 小时前
前端开发技术复习笔记
vue·bootstrap·css3·html5·web
搭贝19 小时前
如何用低代码平台搭建智能商机跟进系统——搭贝实战
低代码
小葛要努力1 天前
创建vue2项目
程序人生·vue
七仔啊1 天前
基于海康门禁的人员计数系统
vue
Jeking2171 天前
低代码平台 表单设计器 unione form editor 功能组件 —— 悬浮按钮组件
低代码·动态表单·表单设计·表单引擎·unione cloud
步十人2 天前
【Vue3】前置知识简单概述（包括ES6核心语法，模块化ESM以及npm基础）
arcgis·npm·vue·es6
有梦想的程序星空3 天前
【环境配置】Vue3项目离线化本地部署echarts全攻略
前端·javascript·vue·echarts
2501_912784083 天前
跨境多语种页面适配方案：低代码SaaS落地实测
低代码
Jeking2173 天前
实战案例｜快捷键盘组件在仓库 PDA 入库表单中的落地应用
低代码·动态表单·表单设计·表单引擎·unione cloud
Jeking2173 天前
低代码平台 unione form editor 功能组件 —— 快捷键盘组件
低代码·动态表单·表单设计·表单引擎·unione cloud
热门推荐
01【AI】2026 年具身智能模型和世界模型总结02GitHub 镜像站点032026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf04Codex 下载安装指南：Windows 和 macOS 官方版下载052026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？06AI科技热点日报 | 2026年6月1日07【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法08CC-Switch 下载、安装与使用配置指南【2026.5.29】09《置身钉内》原文-可播放阅读10Agnes AI 全模态 API 免费实测报告：文生图 + 文生视频完整测试