Vue3使用FcDesigner生成一個文檔的示例代碼
更新時間：2026年05月26日 08:33:57 作者：花歸去
FcDesigner是基于Vue3.0的低代碼可視化表單設(shè)計器,可數(shù)據(jù)驅(qū)動表單渲染,提高開發(fā)效率,本文給大家介紹了Vue3如何使用FcDesigner生成一個文檔,需要的朋友可以參考下
一、版本選擇
根據(jù)項目使用的 UI 框架選擇對應(yīng)版本：
| 版本包名 | UI 框架 | 適用場景 |
|---|---|---|
@form-create/designer | Element Plus | PC 端管理系統(tǒng)（Vue 3） |
@form-create/antd-designer | Ant Design Vue | 企業(yè)級后臺應(yīng)用 |
@form-create/vant-designer | Vant 4 | 移動端 H5/小程序 |
本文以 Element Plus 版本（Vue 3） 為例進(jìn)行說明。
二、安裝依賴
# 安裝設(shè)計器 Vue3 版本 npm install @form-create/designer@^3 # 安裝對應(yīng)的 form-create 渲染器 npm install @form-create/element-ui@^3 # 安裝 Element Plus npm install element-plus
如已安裝舊版本，請更新：
npm update @form-create/element-ui@^3
三、引入配置
方式 1：Node.js / 模塊化引入（推薦）
在 main.js 或 main.ts 中：
import { createApp } from 'vue';
import App from './App.vue';
import FcDesigner from '@form-create/designer';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
const app = createApp(App);
// 1. 掛載 Element Plus
app.use(ElementPlus);
// 2. 掛載 FcDesigner（會自動注冊 fc-designer 組件）
app.use(FcDesigner);
// 3. 掛載 form-create 渲染器（用于表單渲染）
app.use(FcDesigner.formCreate);
app.mount('#app');方式 2：CDN 引入
在 HTML 文件中直接引入：
<!DOCTYPE html>
<html>
<head>
<!-- Element Plus 樣式 -->
<link rel="external nofollow" rel="stylesheet" />
</head>
<body>
<div id="app">
<fc-designer height="100vh"></fc-designer>
</div>
<!-- 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 渲染器 -->
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<!-- 設(shè)計器 -->
<script src="https://unpkg.com/@form-create/designer@next/dist/index.umd.js"></script>
<script>
const { createApp } = Vue;
const app = createApp({});
app.use(ElementPlus);
app.use(FcDesigner);
app.use(FcDesigner.formCreate);
app.mount('#app');
</script>
</body>
</html>四、基礎(chǔ)使用
4.1 模板中使用設(shè)計器
<template>
<div class="designer-wrapper">
<fc-designer ref="designer" height="100vh" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const designer = ref(null);
onMounted(() => {
// 設(shè)計器實例，可用于調(diào)用 API
console.log(designer.value);
});
</script>
<style scoped>
.designer-wrapper {
width: 100%;
height: 100vh;
}
</style>4.2 常用 Props 配置
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
height | String/Number | 100% | 設(shè)計器高度 |
config | Object | {} | 設(shè)計器配置項 |
mask | Boolean | false | 是否顯示遮罩 |
五、核心 API 操作
通過 ref 獲取設(shè)計器實例后，可調(diào)用以下方法：
5.1 獲取/設(shè)置表單 JSON
// 獲取當(dāng)前表單的 JSON 規(guī)則
const getJson = () => {
const json = designer.value.getRule();
console.log('表單規(guī)則:', json);
return json;
};
// 獲取表單配置（表單屬性）
const getOption = () => {
const option = designer.value.getOption();
console.log('表單配置:', option);
return option;
};
// 設(shè)置表單規(guī)則（回顯/加載已有表單）
const setJson = (rule) => {
designer.value.setRule(rule);
};
// 設(shè)置表單配置
const setOption = (option) => {
designer.value.setOption(option);
};5.2 清空與重置
// 清空設(shè)計器 designer.value.clear(); // 清空選中狀態(tài) designer.value.clearActiveRule();
5.3 保存與導(dǎo)出
// 獲取完整表單數(shù)據(jù)（包含規(guī)則和配置）
const getFormData = () => {
return {
rule: designer.value.getRule(),
option: designer.value.getOption()
};
};
// 保存到后端
const saveForm = async () => {
const formData = getFormData();
await fetch('/api/form/save', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});
};六、表單渲染（使用 form-create）
設(shè)計器生成的 JSON 規(guī)則需要通過 form-create 組件渲染：
6.1 渲染表單
<template>
<div>
<!-- 渲染表單 -->
<form-create
v-model="formData"
:rule="rule"
:option="option"
@submit="onSubmit"
/>
</div>
</template>
<script setup>
import { ref } from 'vue';
// 從后端獲取或設(shè)計器導(dǎo)出的 JSON
const rule = ref([
{
type: 'input',
field: 'username',
title: '用戶名',
value: '',
props: {
placeholder: '請輸入用戶名'
},
validate: [{ required: true, message: '用戶名不能為空', trigger: 'blur' }]
},
{
type: 'select',
field: 'gender',
title: '性別',
value: '0',
options: [
{ label: '男', value: '0' },
{ label: '女', value: '1' }
]
}
]);
const option = ref({
form: {
labelPosition: 'right',
labelWidth: '100px'
},
submitBtn: true,
resetBtn: true
});
const formData = ref({});
const onSubmit = (formData) => {
console.log('提交數(shù)據(jù):', formData);
};
</script>6.2 表單方法
<template>
<form-create
ref="formCreate"
v-model="formData"
:rule="rule"
:option="option"
/>
<el-button @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
<el-button @click="validateForm">驗證</el-button>
</template>
<script setup>
import { ref } from 'vue';
const formCreate = ref(null);
const formData = ref({});
const submitForm = () => {
formCreate.value.submit();
};
const resetForm = () => {
formCreate.value.resetFields();
};
const validateForm = async () => {
const valid = await formCreate.value.validate();
console.log('驗證結(jié)果:', valid);
};
// 獲取表單值
const getValue = () => {
const value = formCreate.value.formData();
console.log(value);
};
// 設(shè)置表單值
const setValue = () => {
formCreate.value.setValue('username', '張三');
};
</script>七、自定義擴(kuò)展
7.1 自定義組件擴(kuò)展
FcDesigner 支持注冊自定義組件到設(shè)計器中：
// 在 main.js 中注冊自定義組件
import CustomComponent from './components/CustomComponent.vue';
// 通過 form-create 注冊
FcDesigner.formCreate.component('custom-comp', CustomComponent);
// 在設(shè)計器配置中添加自定義組件
const customMenu = {
title: '業(yè)務(wù)組件',
list: [
{
icon: 'icon-star',
name: 'custom-comp',
label: '自定義組件',
rule() {
return {
type: 'custom-comp',
field: 'custom_field',
title: '自定義字段',
props: {}
};
},
props() {
return [
{
type: 'input',
field: 'prop1',
title: '屬性1'
}
];
}
}
]
};7.2 配置面板定制
通過 config 屬性可以定制設(shè)計器界面：
<template>
<fc-designer :config="designerConfig" />
</template>
<script setup>
const designerConfig = {
// 隱藏某些菜單
menu: ['main', 'aide', 'layout'],
// 自定義字段配置
fieldReadonly: false,
// 語言設(shè)置
locale: 'zh-cn',
// 是否顯示表單配置
showFormConfig: true,
// 是否顯示組件配置
showComponentConfig: true
};
</script>八、完整示例：表單設(shè)計 + 保存 + 渲染
<!-- DesignerPage.vue - 表單設(shè)計頁面 -->
<template>
<div class="designer-page">
<div class="toolbar">
<el-button type="primary" @click="saveForm">保存表單</el-button>
<el-button @click="previewForm">預(yù)覽</el-button>
<el-button @click="clearForm">清空</el-button>
</div>
<fc-designer ref="designer" height="calc(100vh - 60px)" />
</div>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const designer = ref(null);
// 保存表單
const saveForm = async () => {
const data = {
rule: designer.value.getRule(),
option: designer.value.getOption()
};
try {
await fetch('/api/form-design', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
ElMessage.success('保存成功');
} catch (error) {
ElMessage.error('保存失敗');
}
};
// 預(yù)覽表單
const previewForm = () => {
const rule = designer.value.getRule();
const option = designer.value.getOption();
// 打開預(yù)覽彈窗或跳轉(zhuǎn)到預(yù)覽頁面
console.log('預(yù)覽規(guī)則:', rule);
};
// 清空表單
const clearForm = () => {
designer.value.clear();
ElMessage.success('已清空');
};
</script>
<style scoped>
.toolbar {
padding: 10px;
border-bottom: 1px solid #e4e7ed;
background: #fff;
}
</style><!-- RenderPage.vue - 表單渲染頁面 -->
<template>
<div class="render-page">
<form-create
v-model="formData"
:rule="formRule"
:option="formOption"
@submit="handleSubmit"
/>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const formRule = ref([]);
const formOption = ref({});
const formData = ref({});
onMounted(async () => {
// 從后端加載表單配置
const res = await fetch('/api/form-design/1');
const data = await res.json();
formRule.value = data.rule;
formOption.value = data.option;
});
const handleSubmit = (data) => {
console.log('表單提交:', data);
// 提交業(yè)務(wù)數(shù)據(jù)
};
</script>九、注意事項
- Vue 版本要求：Vue 3 項目請使用
@form-create/designer@^3版本 - Node.js 環(huán)境：如需二次開發(fā)設(shè)計器源碼，需要 Node.js 18 + pnpm
- 樣式覆蓋：設(shè)計器內(nèi)部使用 Element Plus 組件，確保正確引入樣式文件
- 移動端適配：移動端項目請使用
@form-create/vant-designer版本
如需進(jìn)一步了解 Ant Design Vue 版本 或 Vant 移動端版本 的配置，可以參考對應(yīng)版本的安裝文檔。
以上就是Vue3使用FcDesigner生成一個文檔的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于Vue3 FcDesigner生成文檔的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
今天小編就為大家分享一篇vue項目出現(xiàn)頁面空白的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
在Vue中,背景圖跨頁面顯示問題可通過生命周期鉤子（如mounted和beforeDestroy）實現(xiàn)動態(tài)控制,確保僅在主頁加載背景圖,登錄頁等其他頁面可移除,從而實現(xiàn)差異化樣式應(yīng)用2025-08-08
vue循環(huán)el-button實現(xiàn)點擊哪個按鈕,那個按鈕就變色
這篇文章主要介紹了vue循環(huán)el-button實現(xiàn)點擊哪個按鈕,那個按鈕就變色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了詳解如何在你的Vue項目配置vux，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了詳解vue不同環(huán)境配置不同的打包命令，主要包括正式環(huán)境、測試環(huán)境和開發(fā)環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
vue3(ts)類型EventTarget上不存在屬性value的問題
這篇文章主要介紹了vue3(ts)類型EventTarget上不存在屬性value的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue大文件分片上傳組件實現(xiàn)解析及關(guān)鍵代碼
在開發(fā)中,如果上傳的文件過大,可以考慮分片上傳,分片就是說將文件拆分來進(jìn)行上傳,將各個文件的切片傳遞給后臺,然后后臺再進(jìn)行合并,這篇文章主要介紹了Vue大文件分片上傳組件實現(xiàn)解析及關(guān)鍵代碼的相關(guān)資料,需要的朋友可以參考下2025-09-09
這篇文章主要介紹了vue2.x引入threejs,如果在開發(fā)過程中出現(xiàn)threejs生成的canvas出現(xiàn)外邊框,只需要用css樣式修改，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
本篇文章主要介紹了詳解vue slot插槽的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
vue在手機(jī)中通過本機(jī)IP地址訪問webApp的方法
這篇文章主要介紹了vue在手機(jī)中通過本機(jī)IP地址訪問webApp的方法,需要的朋友可以參考下2018-08-08