form-create 3.1 发布，动态表单组件/适配 4 个 UI 框架
form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持4个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
3.1 版本主要更新了以下内容:
- 新增 按需加载组件
- 新增 适配 naive-ui
- 新增 适配 arco-design
- 新增 适配 element-plus2.0
- 重构 element-plus
radio,checkbox组件 - 新增
html组件 - 新增
options,children字段支持异步加载 - 新增
getApi方法
不兼容项
- 重构 element-plus
upload组件, 部分配置项失效 - 重新实现
formCreateInect, 改为通过props接收
支持 UI
- element-plus
- ant-design-vue
- naive-ui
- arco-design
按需导入
如果不需要导入UI框架的全部组件,可以通过 auto-import.js 一次导入 form-create 需要的组件. 以 element-ui 为例
import formCreate from '@form-create/element-ui'
import install from '@form-create/element-ui/auto-import'
formCreate.use(install)
app.use(formCreate)
安装
根据自己使用的 UI 安装对应的版本
element-plus^2.0
npm install @form-create/element-ui@next
ant-design-vue^3.0
npm install @form-create/ant-design-vue@next
arco-design^2.0
npm install @form-create/arco-design@next
naive-ui^2.0
npm install @form-create/naive-ui@next
引入 form-create
浏览器
<!-- import Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.22/dist/vue.min.js"></script>
<!-- import element-ui -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.0.0/dist/index.css">
<script src="https://cdn.jsdelivr.net/npm/element-plus@2.0.0/dist/index.full.min.js"></script>
<!-- import formCreate -->
<script src="https://cdn.jsdelivr.net/npm/@form-create/element-ui@next/dist/form-create.min.js"></script>
NodeJs
在 main.js 中写入以下内容：
import ElementUI from 'element-plus/es/index'
import 'element-plus/dist/index.css'
import formCreate from '@form-create/element-ui'
app.use(ElementUI)
app.use(FormCreate)
生成表单
使用 <form-create></form-create> 标签创建表单
<template>
<form-create :rule="rule" v-model:api="fApi" :option="options"/>
</template>
<script>
export default {
data(){
return {
fApi:{},
options:{
onSubmit:(formData)=>{
alert(JSON.stringify(formData))
},
resetBtn:true
},
rule:[
{
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},
]
},
{
type:'a-button',
title:'自定义按钮',
native: false,
on: {
click(){
alert('点击了按钮')
}
},
children: ['按钮']
},
]
}
}
}
</script>
