Skip to content

移动端表单设计器

FcDesigner Mobile版是一款基于Vue3.0的移动端低代码可视化表单设计器工具,通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率,节省开发者的时间。目前,在OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。


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

mobile.gif

注意

  1. 移动端设计器与PC端设计器功能和配置项一致,只有渲染器和设计器器组件的名称不同
  2. 阅读文档时将fc-designerform-create标签替换为form-designer-mobileform-create-mobile标签即可
  3. PC端表单使用@form-create/element-ui组件渲染,移动端表单使用@form-create/vant组件渲染

安装

package-mobile.png

首先,你需要下载并解压 fcDesignerMobile,然后将其集成到你的项目中。

  1. 创建目录:在你的项目根目录下,创建一个名为 fcDesignerMobile 的文件夹。
  2. 解压并复制:解压下载的代码包,将 dist 目录复制到刚刚创建的 fcDesignerMobile 目录中。

引入

接下来,你可以通过 CDN 或 Node.js 方式引入 fcDesignerMobile 到你的项目中。

通过 CDN 引入

如果你希望通过 CDN 直接引入库文件,请按照以下步骤操作:

html
<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"></link>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"></link>


<!-- 引入 Vue 及所需组件 -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>


<!-- 引入 form-create 及 fcDesignerPro -->
<script src="https://unpkg.com/@form-create/element-ui@^3/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@^3/dist/form-create.min.js"></script>
<script src="/path/to/fcDesignerPro/dist/index.umd.js"></script>


<div id="app">
    <fc-designer-mobile height="100vh"></fc-designer-mobile>
</div>
<!-- 挂载组件 -->
<script>
    // 创建 Vue 应用实例
    const app = Vue.createApp({});
    // 挂载 ElementPlus
    app.use(ElementPlus);
    // 挂载 FcDesignerMobile 组件
    app.use(FcDesignerMobile);
    // 挂载 formCreate
    app.use(FcDesigner.formCreate);
    // 挂载 Vue 应用
    app.mount('#app');
</script>

通过 Node.js 引入

如果你正在使用 Node.js 作为包管理器,你可以按照以下步骤安装并引入相关依赖:

1. 安装依赖:

shell
npm install @form-create/element-ui@^3
npm install @form-create/vant@^3
npm install element-plus
npm install vant

2. 引入并挂载:

js
import FcDesignerMobile from '/path/to/fcDesignerPro/dist/index.es.js'
import ElementPlus from 'element-plus'
import vant from 'vant';
import 'element-plus/dist/index.css';
import 'vant/lib/index.css';


// 挂载 ElementPlus
app.use(ElementPlus)
// 挂载 Vant
app.use(vant)
// 挂载 FcDesignerMobile 组件
app.use(FcDesignerMobile)
// 挂载 formCreate
app.use(FcDesignerMobile.formCreate)

使用

成功引入 fcDesignerMobile 后,你可以在模板中使用 fc-designer-mobile 组件,如下所示:

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

编译文件说明

├─dist 编译文件目录
│ ├─index.[es|umd].js 移动端表单设计器
│ ├─mobile/form-create.vant.[es|umd].js 移动端runtime环境的渲染器, 无需导入设计器

命令说明

运行开发环境

sh
npm run dev

完整打包设计器

sh
npm run build

打包多语言文件

sh
npm run build:locale

打包移动端渲染器

sh
npm run build:mobile

打包预览页面,输出 index.html

sh
npm run build:preview

通过以上步骤,你现在已经成功在项目中集成了 fcDesignerMobile,并且可以开始使用它来构建和设计表单。