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

帮助文档 | 源码下载 

特点

• 支持 Vue2 和 Vue3 版本：

• 支持 8 个主流 UI 框架：

  • Element Plus/Element UI

  • Ant Design Vue

  • Antdv Next

  • Tiny Vue

  • Naive UI

  • Arco Design

  • TDesign

  • Vant UI (适用于移动端)

3.3.0版本更新内容

• 适配 antdv-next 使用文档

npm install @form-create/antdv-next

• 适配 OpenTiny TinyVue 使用文档

npm install @form-create/tiny-vue

• 升级 组件包构建链路至 Vite，缩短本地与 CI 构建路径，后续扩展组件形态更轻量

Element Plus（@form-create/element-ui）

• 新增：inputOtp、inputTag、mention、transfer、treeSelect 组件

Naive UI（@form-create/naive-ui）

• 新增：transfer、mention、inputOtp、dynamicInput 组件

• 优化：upload 组件

Arco Design（@form-create/arco-design）

• 新增：treeSelect、transfer、verificationCode、mention 组件

Ant Design Vue（@form-create/ant-design-vue）

• 新增：transfer、mentions 组件

TDesign（@form-create/tdesign）

• 新增：autoComplete 组件

• 优化：upload 组件

其他优化

• 优化 group 组件

• 优化api.validateField

安装 Antdv Next

使用 npm 安装

通过 npm 安装可以更好地与现代构建工具（如 Webpack）集成。

npm i @form-create/antdv-next@^3npm i antdv-next

引入和挂载

// 引入 form-create 组件库
import formCreate from '@form-create/antdv-next';
import Antdv from 'antdv-next';
import 'antdv-next/dist/reset.css';
// 创建 Vue 应用
const app = Vue.createApp({});
app.use(formCreate);
app.use(Antdv);
app.mount('#app');

CDN 引入

可从 npm CDN 获取 @form-create/antdv-next 的打包文件。请先安装并在应用中挂载 antdv-next（含样式），再在同页或模块中加载 FormCreate；日期类组件通常还需 Day.js，请一并引入。

<link href="https://unpkg.com/antdv-next/dist/reset.css" rel="stylesheet">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/dayjs"></script>
<!-- 按 antdv-next 文档挂载组件库后再引入 -->
<script src="https://unpkg.com/@form-create/antdv-next@^3/dist/form-create.min.js"></script>

创建表单

<template>
  <form-create :rule="rule" v-model:api="api" v-model="formData" :option="options" @submit="handleSubmit" /></template>
<script setup>
import { ref } from 'vue';
const api = ref({});
const formData = ref({});
const handleSubmit = (formData) => {
  alert(JSON.stringify(formData));
 };    
const options = ref({
  resetBtn: true,
});
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>

安装 TinyVue

使用 npm 安装

通过 npm 安装可以更好地与现代构建工具（如 Webpack、Vite）集成。

npm i @form-create/tiny-vue@^3npm i @opentiny/vue @opentiny/vue-icon @opentiny/vue-theme

引入和挂载

import { createApp } from 'vue';
import TinyVue from '@opentiny/vue';
import '@opentiny/vue-theme/index.css';
import formCreate from '@form-create/tiny-vue';
const app = createApp({});
app.use(TinyVue);
app.use(formCreate);
app.mount('#app');

CDN 引入

TinyVue 依赖图标包与主题样式，通过 CDN 一键加载往往入口较多、版本易不一致，推荐优先使用 npm。若必须在浏览器侧直连 CDN，请先按 @opentiny/vue 与 @opentiny/vue-theme 的说明引入样式与组件运行时，再加载 FormCreate 的打包文件：

html

<script src="https://unpkg.com/@form-create/tiny-vue@^3/dist/form-create.min.js"></script>

创建表单

<template>
  <form-create :rule="rule" v-model:api="api" v-model="formData" :option="options" @submit="handleSubmit" /></template>
<script setup>
import { ref } from 'vue';
const api = ref({});
const formData = ref({});
const handleSubmit = (formData) => {        alert(JSON.stringify(formData));    };
const options = ref({        resetBtn: true,    });
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>