免费开源的低代码表单FormCreate安装教程，支持可视化设计，适配移动端

低代码表单FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。它支持 6 个 UI 框架，适配移动端，并且支持生成任何 Vue 组件。内置 20 种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定

源码地址: Github | Gitee

特点

多平台与框架支持

• 支持 Vue2 和 Vue3 版本：

FormCreate 兼容不同版本的 Vue 项目，确保无缝集成。

• 支持 6 个主流 UI 框架： - Element Plus- Ant Design Vue- Naive UI- Arco Design- TDesign- Vant UI (适用于移动端)
• 移动端支持：

专为移动端优化，能够生成适配 Vant UI 风格的动态表单。

表单生成与配置

• 通过 JSON 生成表单

基于 JSON 配置动态生成表单，无需手动编写繁琐的表单代码。

• 自定义组件- 生成任意 Vue 组件，并轻松集成到表单中。- 内置数据验证，确保表单输入的正确性。- 通过简单配置快速扩展组件功能。- 自定义组件轻松转换为表单组件，满足复杂业务需求。
• 全局配置

支持全局表单配置、组件全局配置和表单事件，统一管理表单行为和样式。

功能扩展与灵活性

• 自定义配置项扩展

根据业务需求扩展表单功能，快速适应不同场景。

• 支持组件设置前后缀

为表单字段添加前后缀，提升用户体验。

• 组件联动

实现表单组件之间的联动和动态更新，轻松应对复杂表单逻辑。

• 强大的 API

通过 API 快速操作表单，进行数据获取、设置、验证等操作。

• 双向数据绑定

表单数据与界面双向绑定，确保实时更新 UI 和数据。

• 事件扩展与注入

自定义表单事件处理逻辑，增强表单的交互能力。

高性能与布局

• 高性能

内置优化机制，确保表单的快速响应和高效渲染。

• 数据验证

支持多种复杂验证规则，确保输入数据的合法性。

• 栅格布局

支持复杂的栅格布局，轻松实现响应式表单设计。

• 子表单与分组

支持子表单和分组管理，适合处理复杂的数据结构。

内置组件

FormCreate 内置了大量常用的表单组件，满足各种场景需求：

• hidden：隐藏字段
• input：文本输入框
• inputNumber：数字输入框
• checkbox：复选框
• radio：单选框
• switch：开关
• select：下拉选择框
• autoComplete：自动完成输入框
• cascader：级联选择器
• colorPicker：颜色选择器
• datePicker：日期选择器
• timePicker：时间选择器
• rate：评分组件
• slider：滑块
• upload：文件上传
• tree：树形控件
• frame：框架组件
• group (子表单)：子表单组件
• subForm (分组)：分组组件

FormCreate 通过丰富的功能和强大的扩展性，能够帮助开发者快速构建复杂的表单系统，无论是企业级应用还是小型项目，都能轻松应对。

安装

FormCreate 支持多个主流 UI 框架，您可以根据自己项目的需求选择对应的版本进行安装。

请根据您项目中使用的 UI 框架，安装对应的 FormCreate 版本。

Vant UI

版本 移动端

npm i @form-create/vant^3

Element Plus

版本

npm i @form-create/element-ui@^3

Ant Design Vue

版本

npm i @form-create/ant-design-vue@^3

Naive UI

版本

npm i @form-create/naive-ui@^3

Arco Design

版本

npm i @form-create/arco-design@^3

TDesign

版本

npm i @form-create/tdesign@^3

安装后的初始配置

安装完对应的 FormCreate 版本后，您需要将其引入并配置在 Vue 项目中。以下是通用的配置步骤，具体根据您的项目结构和 UI 框架可能略有不同。

引入和注册 FormCreate

在

main.js

或

main.ts

中引入并注册 FormCreate：

import{ createApp }from'vue';import App from'./App.vue';import ElementPlus from'element-plus';// 根据您选择的 UI 框架调整import'element-plus/dist/index.css';// 样式文件import formCreate from'@form-create/element-ui';// 引入 FormCreateconst app =createApp(App);

app.use(ElementPlus);// 挂载 UI 框架
app.use(formCreate);// 挂载 FormCreate

app.mount('#app');

在组件中使用 FormCreate

<template><divid="app"><form-createv-model="formData"v-model:api="formApi":rule="formRules"/></div></template><scriptsetup>import{ ref }from'vue';const formData =ref({});const formApi =ref(null);const formRules =ref([{type:'input',field:'username',title:'用户名',value:'',},{type:'input',field:'password',props:{type:'password'},title:'密码',value:'',}]);</script>

在上面的示例中，我们定义了一个简单的登录表单，包括用户名、密码输入框。表单数据 (formData) 和 API 实例 (formApi) 都是通过 v-model 进行双向绑定的。

安装与引入

使用 CDN 引入

通过 CDN 引入 Vue、Element Plus 和 FormCreate，非常适合快速原型开发和测试。

<!-- 引入 Vue --><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script><!-- 引入 Element Plus --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css"><scriptsrc="https://cdn.jsdelivr.net/npm/element-plus/dist/index.full.min.js"></script><!-- 引入 FormCreate --><scriptsrc="https://cdn.jsdelivr.net/npm/@form-create/element-ui@^3/dist/form-create.min.js"></script><!-- 挂载组件 --><script>const app = Vue.createApp({});
    app.use(ElementPlus);
    app.use(formCreate);
    app.mount('#app');</script>

使用 Node.js 引入

在 Vue 项目中通过 npm 安装并引入 Element Plus 和 FormCreate。

npminstall @form-create/element-ui
npminstall element-plus

import{ createApp }from'vue'import ElementPlus from'element-plus'import'element-plus/dist/index.css'import formCreate from'@form-create/element-ui'const app =createApp(App)
app.use(ElementPlus)
app.use(formCreate)
app.mount('#app')

生成表单

FormCreate 提供了两种方式生成表单：组件模式和全局方法。

组件模式

使用

<form-create>

标签创建表单，适用于大多数 Vue 项目。

<template><formCreate:rule="rule":option="options"v-model="formData"v-model:api="fApi"></formCreate></template><scriptsetup>// 导入 form-createimport formCreate from"@form-create/element-ui";import{ref}from"vue";// 获取 formCreate 组件, 小于3.2版本时需要手动获取组件// const FormCreate = formCreate.$form();const fApi =ref({});const formData =ref({});const options =ref({// 表单提交事件onSubmit:function(formData){alert(JSON.stringify(formData))}});const rule =ref([{type:'input',field:'goods_name',title:'商品名称',value:'form-create'},{type:'checkbox',field:'label',title:'标签',value:[0,1,2,3],options:[{label:'好用',value:0},{label:'快速',value:1},{label:'高效',value:2},{label:'全能',value:3},]},]);</script>

全局方法

使用 formCreate.create(rule, option) 全局方法生成表单。适用于需要在非 Vue 组件中动态生成表单的场景。

<divid="app"><divid="goods-form"></div></div>

//表单插入的节点const root = document.getElementById('goods-form')const fApi = window.formCreate.create(//表单生成规则[{type:'input',field:'goods_name',title:'商品名称'},{type:'datePicker',field:'created_at',title:'创建时间'}],//组件参数配置{el: root,//显示表单重置按钮resetBtn:true,//表单提交事件onSubmit:function(formData){//按钮进入提交状态
            fApi.btn.loading()}})