一、版本选择根据项目使用的 UI 框架选择对应版本版本包名UI 框架适用场景form-create/designerElement PlusPC 端管理系统Vue 3form-create/antd-designerAnt Design Vue企业级后台应用form-create/vant-designerVant 4移动端 H5/小程序本文以Element Plus 版本Vue 3为例进行说明。二、安装依赖# 安装设计器 Vue3 版本 npm install form-create/designer^3 # 安装对应的 form-create 渲染器 npm install form-create/element-ui^3 # 安装 Element Plus npm install element-plus如已安装旧版本请更新npm update form-create/element-ui^3三、引入配置方式 1Node.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);方式 2CDN 引入在 HTML 文件中直接引入!DOCTYPE html html head !-- Element Plus 样式 -- link hrefhttps://unpkg.com/element-plus/dist/index.css relstylesheet / /head body div idapp fc-designer height100vh/fc-designer /div !-- Vue 3 -- script srchttps://unpkg.com/vue/script !-- Element Plus -- script srchttps://unpkg.com/element-plus/dist/index.full.js/script !-- form-create 渲染器 -- script srchttps://unpkg.com/form-create/element-uinext/dist/form-create.min.js/script !-- 设计器 -- script srchttps://unpkg.com/form-create/designernext/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四、基础使用4.1 模板中使用设计器template div classdesigner-wrapper fc-designer refdesigner height100vh / /div /template script setup import { ref, onMounted } from vue; const designer ref(null); onMounted(() { // 设计器实例可用于调用 API console.log(designer.value); }); /script style scoped .designer-wrapper { width: 100%; height: 100vh; } /style4.2 常用 Props 配置属性名类型默认值说明heightString/Number100%设计器高度configObject{}设计器配置项maskBooleanfalse是否显示遮罩五、核心 API 操作通过ref获取设计器实例后可调用以下方法5.1 获取/设置表单 JSON// 获取当前表单的 JSON 规则 const getJson () { const json designer.value.getRule(); console.log(表单规则:, json); return json; }; // 获取表单配置表单属性 const getOption () { const option designer.value.getOption(); console.log(表单配置:, option); return option; }; // 设置表单规则回显/加载已有表单 const setJson (rule) { designer.value.setRule(rule); }; // 设置表单配置 const setOption (option) { designer.value.setOption(option); };5.2 清空与重置// 清空设计器 designer.value.clear(); // 清空选中状态 designer.value.clearActiveRule();5.3 保存与导出// 获取完整表单数据包含规则和配置 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设计器生成的 JSON 规则需要通过form-create组件渲染6.1 渲染表单template div !-- 渲染表单 -- form-create v-modelformData :rulerule :optionoption submitonSubmit / /div /template script setup import { ref } from vue; // 从后端获取或设计器导出的 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(提交数据:, formData); }; /script6.2 表单方法template form-create refformCreate v-modelformData :rulerule :optionoption / el-button clicksubmitForm提交/el-button el-button clickresetForm重置/el-button el-button clickvalidateForm验证/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(验证结果:, valid); }; // 获取表单值 const getValue () { const value formCreate.value.formData(); console.log(value); }; // 设置表单值 const setValue () { formCreate.value.setValue(username, 张三); }; /script七、自定义扩展7.1 自定义组件扩展FcDesigner 支持注册自定义组件到设计器中// 在 main.js 中注册自定义组件 import CustomComponent from ./components/CustomComponent.vue; // 通过 form-create 注册 FcDesigner.formCreate.component(custom-comp, CustomComponent); // 在设计器配置中添加自定义组件 const customMenu { title: 业务组件, 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属性可以定制设计器界面template fc-designer :configdesignerConfig / /template script setup const designerConfig { // 隐藏某些菜单 menu: [main, aide, layout], // 自定义字段配置 fieldReadonly: false, // 语言设置 locale: zh-cn, // 是否显示表单配置 showFormConfig: true, // 是否显示组件配置 showComponentConfig: true }; /script八、完整示例表单设计 保存 渲染!-- DesignerPage.vue - 表单设计页面 -- template div classdesigner-page div classtoolbar el-button typeprimary clicksaveForm保存表单/el-button el-button clickpreviewForm预览/el-button el-button clickclearForm清空/el-button /div fc-designer refdesigner heightcalc(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(保存失败); } }; // 预览表单 const previewForm () { const rule designer.value.getRule(); const option designer.value.getOption(); // 打开预览弹窗或跳转到预览页面 console.log(预览规则:, 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 classrender-page form-create v-modelformData :ruleformRule :optionformOption submithandleSubmit / /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); // 提交业务数据 }; /script九、注意事项Vue 版本要求Vue 3 项目请使用form-create/designer^3版本Node.js 环境如需二次开发设计器源码需要 Node.js 18 pnpm样式覆盖设计器内部使用 Element Plus 组件确保正确引入样式文件移动端适配移动端项目请使用form-create/vant-designer版本十、相关资源官方文档view.form-create.comGitHub 源码github.com/xaboy/form-create-designerPro 版本pro.form-create.com提供更多高级功能如需进一步了解Ant Design Vue 版本或Vant 移动端版本的配置可以参考对应版本的安装文档。
