Vue3使用FcDesigner生成一个文档的示例代码

更新时间：2026年05月26日 08:33:57 作者：花归去

FcDesigner是基于Vue3.0的低代码可视化表单设计器,可数据驱动表单渲染,提高开发效率,本文给大家介绍了Vue3如何使用FcDesigner生成一个文档,需要的朋友可以参考下

一、版本选择

根据项目使用的 UI 框架选择对应版本：

版本包名	UI 框架	适用场景
`@form-create/designer`	Element Plus	PC 端管理系统（Vue 3）
`@form-create/antd-designer`	Ant Design Vue	企业级后台应用
`@form-create/vant-designer`	Vant 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

三、引入配置

方式 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 href="https://unpkg.com/element-plus/dist/index.css" 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>
  <!-- 设计器 -->
  <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>

四、基础使用

4.1 模板中使用设计器

<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(() => {
  // 设计器实例，可用于调用 API
  console.log(designer.value);
});
</script>
<style scoped>
.designer-wrapper {
  width: 100%;
  height: 100vh;
}
</style>

4.2 常用 Props 配置

属性名	类型	默认值	说明
`height`	String/Number	`100%`	设计器高度
`config`	Object	`{}`	设计器配置项
`mask`	Boolean	`false`	是否显示遮罩

五、核心 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-model="formData"
      :rule="rule"
      :option="option"
      @submit="onSubmit"
    />
  </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);
};
</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('验证结果:', 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 :config="designerConfig" />
</template>
<script setup>
const designerConfig = {
  // 隐藏某些菜单
  menu: ['main', 'aide', 'layout'],
  // 自定义字段配置
  fieldReadonly: false,
  // 语言设置
  locale: 'zh-cn',
  // 是否显示表单配置
  showFormConfig: true,
  // 是否显示组件配置
  showComponentConfig: true
};
</script>

八、完整示例：表单设计 + 保存 + 渲染

<!-- DesignerPage.vue - 表单设计页面 -->
<template>
  <div class="designer-page">
    <div class="toolbar">
      <el-button type="primary" @click="saveForm">保存表单</el-button>
      <el-button @click="previewForm">预览</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('保存失败');
  }
};
// 预览表单
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 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);
  // 提交业务数据
};
</script>

九、注意事项

Vue 版本要求：Vue 3 项目请使用 @form-create/designer@^3 版本
Node.js 环境：如需二次开发设计器源码，需要 Node.js 18 + pnpm
样式覆盖：设计器内部使用 Element Plus 组件，确保正确引入样式文件
移动端适配：移动端项目请使用 @form-create/vant-designer 版本

如需进一步了解 Ant Design Vue 版本 或 Vant 移动端版本 的配置，可以参考对应版本的安装文档。

以上就是Vue3使用FcDesigner生成一个文档的示例代码的详细内容，更多关于Vue3 FcDesigner生成文档的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue中tab栏切换的简单实现
本文主要介绍了Vue中tab栏切换的简单实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
vue实现一个简单的Grid拖拽布局
这篇文章主要为大家详细介绍了如何利用vue实现一个简单的Grid拖拽布局,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12
vue.js从安装到搭建过程详解
这篇文章主要为大家详细介绍了vuejs从安装到搭建的整个过程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
这篇文章主要介绍了vue.js 2.*项目环境搭建、运行、打包发布的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
Vue3实现表单输入的双向绑定的示例代码
Vue.js 是一个渐进式的JavaScript框架,广泛用于构建交互式用户界面,在 Vue 中,双向绑定是一项非常核心的概念,尤其是在处理表单输入时,它使得数据和用户界面之间的互动变得简单又高效,在本篇博客中,我们将深入探讨如何在 Vue 3 中实现表单输入的双向绑定
2025-01-01
一篇文章带你彻底搞懂VUE响应式原理
这篇文章主要介绍了一篇文章带你彻底搞懂VUE响应式原理，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可任意参考一下,需要的朋友可以参考下
2022-06-06
前端vue+elementUI如何实现记住密码功能
这篇文章主要给大家介绍了关于vue+elementUI如何实现记住密码功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
Vuejs实现购物车功能
这篇文章主要为大家详细介绍了Vuejs实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
vue3实现图片瀑布流展示效果实例代码
这篇文章主要介绍了vue3实现图片瀑布流展示效果的相关资料,该组件可以调整列数、支持懒加载、自定义每页滚动数量、高度和点击效果,作者展示了组件的效果,并详细说明了实现方法,包括组件的创建和依赖的工具库,需要的朋友可以参考下
2024-11-11
深入了解Vue使用vue-qr生成二维码的方法
这篇文章主要为大家介绍了Vue使用vue-qr生成二维码的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12