form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
这个是 Vue3 版本
- element-plus
- ant-design-vue
- naive-ui
- arco-design
- tdesign
如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！本项目还在不断开发完善中,如有任何建议或问题请在这里提出
本项目QQ讨论群629709230
- 预览
| 包名 | 说明 |
|---|---|
| @form-create/element-ui |
element-plus 版本 |
| @form-create/ant-design-vue |
ant-design-vue 版本 |
| @form-create/arco-design |
arco-design 版本 |
| @form-create/naive-ui |
naive-ui 版本 |
| @form-create/tdesign |
tdesign 版本 |
| @form-create/designer |
表单设计器 (已适配 Vue3) |
图例
根据自己使用的 UI 安装对应的版本
element-ui
npm install @form-create/element-ui@nextant-design-vue
npm install @form-create/ant-design-vue@nextarco-design
npm install @form-create/arco-design@nextnaive-ui
npm install @form-create/naive-ui@nexttdesign
npm install @form-create/tdesign@nextCDN:
element-plus
<link href="https://unpkg.com/element-plus@2.0.1/dist/index.css"></link>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/element-plus@2.0.1/dist/index.full.js"></script>
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>ant-design-vue
<link href="https://unpkg.com/ant-design-vue@3.0.0-alpha.11/dist/antd.min.css"></link>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/dayjs"></script>
<script src="https://unpkg.com/ant-design-vue@3.0.0-alpha.11/dist/antd.min.js"></script>
<script src="https://unpkg.com/@form-create/ant-design-vue@next/dist/form-create.min.js"></script>NodeJs:
element-plus ^2.0
import formCreate from '@form-create/element-ui'
app.use(formCreate)element-plus (with unplugin-vue-components/vite & ElementPlusResolver)
import formCreate from '@form-create/element-ui'
import install from '@form-create/element-ui/auto-import'
formCreate.use(install)
app.use(formCreate)ant-design-vue ^3.0
import formCreate from '@form-create/ant-design-vue'
app.use(formCreate)arco-design ^2.0
import formCreate from '@form-create/arco-design'
app.use(formCreate)naive-ui ^2.0
import formCreate from '@form-create/naive-ui'
app.use(formCreate)tdesign ^0.17.3
import formCreate from '@form-create/tdesign'
app.use(formCreate)<form-create :rule="rule" v-model:api="fApi" :option="options" v-model="value"/>export default {
data(){
return {
fApi:{},
value:{field1:'111',field2:'222',time:'11:11:11'},
options:{
onSubmit:(formData)=>{
alert(JSON.stringify(formData))
}
},
rule:[
{type:'input', field:'field1',title:'field1',value:'aaa'},
{type:'input', field:'field2',title:'field2',value:'sss'},
{type:'timePicker', field:'time',title:'time',value:'12:12:12'},
{
type:'ElButton',
title:'修改 field1',
native: false,
on:{
click: ()=>{
this.rule[0].value+='a'
}
},
children: ['点击'],
}
]
}
}
}下载项目
$ git clone https://github.com/xaboy/form-create.git
$ cd form-create安装依赖
$ npm run bootstrap查看 element-ui 示例
$ npm run dev:ele查看 ant-design-vue 示例
$ npm run dev:antd时光弧线 | wxxtqk | williamBoss | HeyMrLin | djkloop | daiwenyong | JetBrains
email : xaboy2005@qq.com
Copyright (c) 2018-present xaboy