低代码表单FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。它支持 6 个 UI 框架，适配移动端，并且支持生成任何 Vue 组件。内置 20 种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定
特点
多平台与框架支持
- 支持 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'; // 引入 FormCreate
const app = createApp(App);
app.use(ElementPlus); // 挂载 UI 框架
app.use(formCreate); // 挂载 FormCreate
app.mount('#app');
在组件中使用 FormCreate
<template>
<div id="app">
<form-create v-model="formData" v-model:api="formApi" :rule="formRules" />
</div>
</template>
<script setup>
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 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<!-- 引入 Element Plus -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css">
<script src="https://cdn.jsdelivr.net/npm/element-plus/dist/index.full.min.js"></script>
<!-- 引入 FormCreate -->
<script src="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。
npm install @form-create/element-ui
npm install 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>
<script setup>
// 导入 form-create
import 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 组件中动态生成表单的场景。
<div id="app">
<div id="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()
}
})