移动端表单设计器(Vue2版本)
FcDesigner Mobile版是一款基于Vue2.7的移动端低代码可视化表单设计器工具,通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率,节省开发者的时间。目前,在OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。
开源版
本项目采用 Vue2.7 和 ElementUI 进行页面构建,移动端采用vant2.0,内置多语言解决方案,支持二次扩展开发,支持自定义组件扩展。
注意
- 移动端设计器与PC端设计器功能和配置项一致,只有渲染器和设计器器组件的名称不同
- 阅读文档时将
fc-designer
和form-create
标签替换为fc-designer-mobile
和form-create-mobile
标签即可 - PC端表单使用
@form-create/element-ui
组件渲染,移动端表单使用@form-create/vant
组件渲染
安装
首先,你需要下载并解压 fcDesignerMobile,然后将其集成到你的项目中。
标准集成:
创建目录:在你的项目根目录下,创建一个名为
fcDesignerMobile
的文件夹。解压并复制:解压下载的代码包,将
dist
目录复制到刚刚创建的fcDesignerMobile
目录中。
源码集成(可选):
将解压后的
src/
目录全部内容复制到fcDesignerMobile
文件夹将源码包内
package.json
的dependencies
字段合并到项目的package.json
重新运行
npm install
安装依赖
注意
源码方式集成后若进行二次开发,后续直接覆盖更新会导致自定义修改丢失,建议通过版本管理工具(如git)进行差异合并更新。
编译文件说明
├─dist 编译文件目录
│ │//移动端表单设计器
│ ├─index.[es|umd].js
│ │//移动端runtime环境的渲染器, 无需导入设计器
│ ├─mobile/form-create.vant.[es|umd].js
│
引入
接下来,你可以通过 CDN 或 Node.js 方式引入 fcDesignerMobile 到你的项目中。
注意
Vue 版本必须使用 2.7.16 版本,其他版本可能存在兼容性问题导致运行报错。
通过 Node.js 引入
如果你正在使用 Node.js 作为包管理器,你可以按照以下步骤安装并引入相关依赖:
1. 安装依赖:
npm install @form-create/element-ui@2.7
npm install @form-create/vant@2.7
npm install element-ui
npm install vant@2
如已安装旧版本渲染器,请执行以下命令更新至最新版:
npm update @form-create/element-ui@^2.7
npm update @form-create/vant@^2.7
请检查当前 Vue 版本,若版本低于 2.7.16,请执行以下升级命令:
npm update vue@^2.7
2. 引入并挂载:
import Vue from 'vue';
import FcDesignerMobile from '/path/to/FcDesignerMobile/dist/index.es.js'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Vant from 'vant';
import 'vant/lib/index.css';
// 挂载 ElementUI
Vue.use(ElementUI)
// 挂载 Vant
Vue.use(vant)
// 挂载 FcDesignerMobile 组件
Vue.use(FcDesignerMobile)
// 挂载 formCreate
Vue.use(FcDesignerMobile.formCreate)
通过 CDN 引入
如果你希望通过 CDN 直接引入库文件,请按照以下步骤操作:
<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></link>
<link rel="stylesheet" href="https://unpkg.com/vant@2/lib/index.css"></link>
<!-- 引入 Vue 及所需组件 -->
<script src="https://unpkg.com/vue@2.7/dist/vue.min.js"></script>
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<script src="https://unpkg.com/vant@2/lib/vant.min.js"></script>
<!-- 引入 form-create 及 FcDesignerMobile -->
<script src="https://unpkg.com/@form-create/element-ui@^2.7/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@^2.7/dist/form-create.min.js"></script>
<script src="/path/to/fcDesignerMobile/dist/index.umd.js"></script>
<div id="app">
<fc-designer-mobile height="100vh"></fc-designer-mobile>
</div>
<!-- 挂载组件 -->
<script>
// 挂载 FcDesignerMobile 组件
Vue.use(FcDesignerMobile);
// 挂载 formCreate
Vue.use(FcDesignerMobile.formCreate);
// 挂载 Vue 应用
new Vue({
el: '#app'
});
</script>
使用
成功引入 fcDesignerMobile 后,你可以在模板中使用 fc-designer-mobile 组件,如下所示:
<fc-designer-mobile ref="designer" height="100vh"/>
命令说明
开发环境要求:Node.js 需使用 v18 版本,包管理器工具采用 pnpm。
开发环境
pnpm run dev
打包设计器
pnpm run build
打包多语言文件
pnpm run build:locale
打包移动端渲染器
pnpm run build:mobile
打包预览页面,输出 index.html
pnpm run build:preview
通过以上步骤,你现在已经成功在项目中集成了 fcDesignerMobile,并且可以开始使用它来构建和设计表单。