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版本更新内容
npm install @form-create/antdv-next
npm install @form-create/tiny-vue
Element Plus(@form-create/element-ui)
Naive UI(@form-create/naive-ui)
Arco Design(@form-create/arco-design)
Ant Design Vue(@form-create/ant-design-vue)
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>