使用开源的 Vue 移动端表单设计器创建表单

FcDesigner Vant 版是一款基于 Vue3.0 的移动端低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，进步开辟者对表单的开辟效率，节流开辟者的时间。
源码下载 | 演示地址 | 资助文档

---

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

• 内置中英文语言，轻松应对全球化需求。
  
• 提供 32 种常用组件，覆盖多种场景，满足多样化需求。
  
• 支持灵活扩展自定义组件，满足个性化需求。
  
• 支持二次扩睁开辟，满足深度定制需求。
  
• 完善兼容 PC 端功能：表单大纲、操纵记录、数据录入、组件生成、事件配置、表单验证、栅格布局、表格布局等。
  

安装​

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

1. npm install @form-create/vant-designer@^3

复制代码

引入​

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

1. <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"></link>
2. <link rel="stylesheet" href="https://unpkg.com/vant@4/lib/index.css"/>
3. <script src="https://unpkg.com/vue"></script>
4. <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
5. <script src="https://unpkg.com/vant@4/lib/vant.min.js"></script>
6. <script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
7. <script src="https://unpkg.com/@form-create/vant@next/dist/form-create.min.js"></script>
8. <script src="https://unpkg.com/@form-create/vant-designer@next/dist/index.umd.js"></script>
9. <div id="app">
10.     <fc-designer-mobile height="100vh"></fc-designer-mobile>
11. </div>
12. <script>
13.     const { createApp } = Vue;
14.     const app = createApp({});
15.     app.use(ElementPlus);
16.     app.use(vant);
17.     app.use(FcDesignerMobile);
18.     app.use(FcDesignerMobile.formCreate);
19.     app.mount('#app');
20. </script>

复制代码

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

1. import FcDesignerMobile from '@form-create/vant-designer'
2. import ELEMENT from 'element-plus';
3. import vant from 'vant';
4. import 'vant/lib/index.css';
5. import 'element-plus/dist/index.css';
6. // 创建 Vue 应用
7. const app = createApp(App);
8. app.use(ELEMENT)
9. app.use(vant)
10. app.use(FcDesignerMobile)
11. app.use(FcDesignerMobile.formCreate)
12. // 挂载应用
13. app.mount('#app');

复制代码

使用​

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

1. <template>
2.     <fc-designer-mobile ref="designer" height="100vh" />
3. </template>
4. <script setup>
5.     import { ref } from 'vue';
6.     // 可以在此处获取设计器实例或进行其他操作
7.     const designer = ref(null);
8. </script>

复制代码

组件配置​

使用 fc-designer-mobile 组件来实现表单设计器。以下是各配置项的具体说明：

1. <fc-designer ref="designer" :locale="locale" height="100vh"/>

复制代码

• locale Object
  

多语言配置对象。默认为中文。通过设置此属性，可以切换到其他语言的界面文本。

• mask boolean
  

是否显示组件遮罩层。默认为 true，此时用户无法操纵组件。设置为 false 可以让用户直接操纵设计器中的组件。

• height string|number
  

设计器组件的高度。可以使用字符串（如 500px, 100vh）或数字（如 500）。指定设计器的显示高度。

• menu MenuList
  

自定义左侧菜单列表。此配置会覆盖设计器的默认菜单列表。MenuList 应包罗你希望在设计器左侧显示的菜单项。

• config Config
  

配置设计器内的模块显示状态和默认规则。通过此配置，可以控制哪些模块可见，以及修改默认设置。

• handle Handle
  

设计器顶部的扩展操纵按钮。Handle 是一个包罗按钮名称和回调函数的数组。通过此配置，可以添加自定义操纵按钮并指定其举动。
表单渲染​

确保在使用 formCreateMobile 和 FcDesignerMobile 进行表单设计和回显时，精确地处理 JSON 数据格式是至关重要的。以下文档具体介绍了怎样获取、回显、渲染表单。
必须使用 formCreate.parseJson 和 formCreate.toJson 方法来转换 JSON 数据，以确保数据格式精确。

获取设计表单的数据​

在表单设计器中，可以通过以下方法获取表单的生成规则和配置，这些数据通常会被保存到数据库中，以便后续加载和回显。

1. //获取表单的生成规则
2. const ruleJson = this.$refs.designer.getJson();
3. //获取表单的配置
4. const optionsJson = this.$refs.designer.getOptionsJson();
7. //todo 保存JSON数据到数据库中

复制代码

这些数据可以用来保存到数据库中，确保表单的状态和配置可以在页面革新或重新加载时恢复。
回显设计表单​

当必要回显设计好的表单时，您必要加载之前保存的 JSON 规则和配置，并将其应用到设计器中。

1. //todo 加载表单JSON规则
4. //回显表单
5. this.$refs.designer.setOptions(optionsJson);
6. this.$refs.designer.setRule(ruleJson);

复制代码

通过这些方法，可以将之前保存的表单规则和配置应用到设计器中，从而恢复表单的状态。
表单渲染​

要渲染表单，您必要挂载 form-create 到 Vue 应用中，并加载表单规则和配置。

1. //从设计器中导入 formCreate
2. import {formCreate} from '@form-create/vant-designer';
3. //挂载 formCreate
4. app.use(formCreate);

复制代码

表单渲染示例

1. <template>
2.     <div id="app">
3.         <form-create-mobile v-model="formData" v-model:api="fApi" :rule="rule" :option="option"></form-create>
4.     </div>
5. </template>
6. <script>
7.     import {formCreate} from '@form-create/vant-designer';
8.     export default {
9.         data() {
10.             return {
11.                 //实例对象
12.                 fApi: {},
13.                 //表单数据
14.                 formData: {},
15.                 //表单生成规则
16.                 rule: [],
17.                 //组件参数配置
18.                 option: {}
19.             }
20.         },
21.         beforeCreate(){
22.             const rule,option;
23.             // todo 加载表单JSON规则
24.             this.rule = formCreate.parseJson(rule);
25.             this.option = formCreate.parseJson(option);
26.         }
27.     }
28. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。