代码制作



FcDesigner 是基于 @form-create/element-ui 实现的低代码可视化表单设计器组件。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。

本项目采用 Vue 和 ElementPlus/ElementUI 进行页面构建，内置多语言解决方案，支持二次扩展开发，支持自定义组件扩展。

项目分为设计器 form-create-designer 和 渲染器 form-create，用户可以通过可视化界面快速高效地创建表单，并输出为JSON。并且通过加载JSON，渲染器可以渲染并输出相应的表单。

• @form-create/designer PC端表单设计器 💻
• @form-create/vant-designer 移动端表单设计器 📱

国际化

产品充分考虑了全球化需求，内置了中文、英文语言选项，无论是在对外交流还是跨国业务进行中都可提供强大的语言支持，使您在应对全球化的过程中无忧无虑，轻松自如。

绑定事件

产品提供了可配置的组件和表单事件功能，为您处理各种动态交互提供了便利。无论用户需求何种复杂度与多样性，我们都能迎刃而解，提供满足使用者需求的解决方案。

丰富的组件

产品内置了36种常用组件，广泛覆盖多种场景需求，以满足不同的用户需求。更为重要的是，我们支持灵活扩展自定义组件，以满足您独特、个人化的需求，为您提供更丰富的使用体验。

灵活的布局

产品提供了多种复杂表单布局方式，包括栅格、表格等，这些功能让复杂的表单布局变得趋于简洁明了。此举不仅拓宽用户选择范围，更是为用户提供了贴心可靠的使用体验。

可视化

产品以可视化操作为主导，使您可以轻而易举地完成表单页面的编辑。通过直观的图形界面，无需深入繁琐复杂的代码便可完成操作，大大降低了使用门槛，让编辑工作变得更轻松、更高效。

要开始使用 @form-create/designer，首先需要将其安装到您的项目中。可以通过 npm 安装：

安装element-ui版本的 form-create

CDN 引入

如果您希望通过 CDN 方式引入 FcDesigner，请确保先引入 Vue.js 和 Element UI。然后引入 @form-create/element-ui 和 @form-create/designer，并在 Vue 实例中进行配置。

Node.js 引入

对于 Node.js 项目，您需要通过 npm 安装相关依赖，并在您的项目中引入并配置它们。

在 Vue 组件中，您可以像下面这样使用 fc-designer 组件：

支持 Vue 3 环境，以下是如何在 Vue 3 项目中安装和使用该库的指南。

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

安装 Vue 3 版本的 form-create

CDN 引入

如果您选择使用 CDN，可以按照以下步骤在 HTML 文件中引入相关依赖：

Node.js 引入

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

在 Vue 3 组件中，您可以通过以下方式使用 fc-designer 组件：

FcDesigner Vant版是一款基于Vue3.0的移动端低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。

本项目采用 Vue3.0 和 ElementPlus 进行移动端页面构建，移动端使用的是vant4.0版本，内置多语言解决方案，支持二次扩展开发，支持自定义组件扩展。

首先，安装 @form-create/vant-designer

CDN 引入

如果您选择使用 CDN，可以按照以下步骤在 HTML 文件中引入相关依赖：

Node.js 引入

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

在 Vue 3 组件中，您可以通过以下方式使用 fc-designer 组件：

提供了多语言支持，通过 配置项，你可以轻松切换界面的显示语言。内置的语言包包括中文、英文和日文，方便应对不同地区的需求。

在使用之前，你需要先导入所需的语言包。以下是三种内置语言的导入方式：

• 中文:

• 英文:

导入语言包后，你可以通过 locale 属性将其应用到 fc-designer 组件中。以下示例展示了如何在 Vue 项目中配置和使用语言包：

通过以上步骤，你现在已经成功配置了多语言支持，可以根据需求自由切换语言。

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/13080.html