Element UI 版本PC端表单设计器

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

---

本项目采用 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" 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 组件：

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