移动端表单设计器

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

---

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

注意

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

安装

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

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

引入

CDN 引入

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

<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"></link>
<link rel="stylesheet" href="https://unpkg.com/vant@4/lib/index.css"/>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<script src="https://unpkg.com/vant@4/lib/vant.min.js"></script>
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant-designer@next/dist/index.umd.js"></script>
<div id="app">
    <fc-designer-mobile height="100vh"></fc-designer-mobile>
</div>
<script>
    const { createApp } = Vue;
    const app = createApp({});
    app.use(ElementPlus);
    app.use(vant);
    app.use(FcDesignerMobile);
    app.use(FcDesignerMobile.formCreate);
    app.mount('#app');
</script>

Node.js 引入

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

import FcDesignerMobile from '@form-create/vant-designer'
import ELEMENT from 'element-plus';
import vant from 'vant';
import 'vant/lib/index.css';
import 'element-plus/dist/index.css';
// 创建 Vue 应用
const app = createApp(App);
app.use(ELEMENT)
app.use(vant)
app.use(FcDesignerMobile)
app.use(FcDesignerMobile.formCreate)
// 挂载应用
app.mount('#app');

使用

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

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