Vue 開源項目低代碼表單設計器 FcDesigner v3.3 版本發布!兼容Element Plus/Ant Design/Vant,支持PC/移動端

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 安裝：

npm install @form-create/designer@^1
npm install @form-create/element-ui@^2.7
npm install element-ui

如已安裝舊版本渲染器，請執行以下命令更新至最新版：

npm update @form-create/element-ui@^2.7

請檢查當前 Vue 版本，若版本低于 2.7，請執行以下升級命令：

npm update vue@^2.7

引入

Node.js 引入

對于 Node.js 項目，您需要通過 npm 安裝相關依賴，并在您的項目中引入并配置它們。

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 實例中進行配置

<!-- 引入 Vue.js -->
<script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script>
<!-- 引入 Element UI 樣式 -->
<link rel="stylesheet" >
<!-- 引入 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 組件：

<template>
    <fc-designer ref="designer" height="100vh" />
</template>

Element Plus 版本表單設計器

@form-create/designer 支持 Vue 3 環境，以下是如何在 Vue 3 項目中安裝和使用該庫的指南。

演示站

安裝

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

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

如已安裝舊版本渲染器，請執行以下命令更新至最新版：

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

引入

Node.js 引入

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

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 文件中引入相關依賴：

<!-- 引入 Element Plus 樣式 -->
<link  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 組件：

<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

npm install @form-create/antd-designer@^3
npm install @form-create/ant-design-vue@^3
npm install ant-design-vue

如已安裝舊版本渲染器，請執行以下命令更新至最新版：

npm update @form-create/ant-design-vue@^3

引入

Node.js 引入

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

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 文件中引入相關依賴：

<link rel="stylesheet" ></link>
<link rel="stylesheet" ></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 組件：

<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

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

如已安裝舊版本渲染器，請執行以下命令更新至最新版：

npm update @form-create/element-ui@^3
npm update @form-create/vant@^3

引入

Node.js 引入

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

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 文件中引入相關依賴：

<link rel="stylesheet" ></link>
<link rel="stylesheet" />
<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 組件：

<template>
    <fc-designer-mobile ref="designer" height="100vh" />
</template>
<script setup>
    import { ref } from 'vue';
    // 可以在此處獲取設計器實例或進行其他操作
    const designer = ref(null);
</script>

獲取設計表單的數據

在表單設計器中，可以通過以下方法獲取表單的生成規則和配置，這些數據通常會被保存到數據庫中，以便后續加載和回顯。

//獲取表單的生成規則
const ruleJson = this.$refs.designer.getJson();
//獲取表單的配置
const optionsJson = this.$refs.designer.getOptionsJson();


//todo 保存JSON數據到數據庫中

這些數據可以用來保存到數據庫中，確保表單的狀態和配置可以在頁面刷新或重新加載時恢復。

回顯設計表單

當需要回顯設計好的表單時，您需要加載之前保存的 JSON 規則和配置，并將其應用到設計器中。

//todo 加載表單JSON規則


//回顯表單
this.$refs.designer.setOptions(optionsJson);
this.$refs.designer.setRule(ruleJson);

通過這些方法，可以將之前保存的表單規則和配置應用到設計器中，從而恢復表單的狀態。

表單渲染

要渲染表單，您需要掛載 form-create 到 Vue 應用中，并加載表單規則和配置。

//從設計器中導入 formCreate
import {formCreate} from '@form-create/designer';
//掛載 formCreate
app.use(formCreate);

表單渲染示例

<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 請求動態加載表單規則和配置，并將表單數據保存到服務器。

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);
    }
}

posted @ 2025-07-16 13:03 xaboy 閱讀(805) 評論(0) 收藏舉報

刷新頁面返回頂部

xaboy的博客

學習記錄

Vue 開源項目低代碼表單設計器 FcDesigner v3.3 版本發布!兼容Element Plus/Ant Design/Vant,支持PC/移動端

核心功能??

3.3 版本更新內容

? 新增功能:

?? 功能優化:

?? 問題修復：

配置面板

Element UI 版本表單設計器

安裝

引入

Element Plus 版本表單設計器

安裝

引入

使用

AntDesignVue 版本 PC 端表單設計器

安裝

引入

使用

移動端表單設計器

安裝

引入

使用

獲取設計表單的數據

回顯設計表單

表單渲染

動態加載和保存表單配置

公告