FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架,并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。
- 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@next
ant-design-vue
npm install @form-create/ant-design-vue@next
arco-design
npm install @form-create/arco-design@next
naive-ui
npm install @form-create/naive-ui@next
tdesign
npm install @form-create/tdesign@next
CDN:
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