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>

form-create 3.1 发布，动态表单组件/适配 4 个 UI 框架

安装

引入 form-create

浏览器

NodeJs

生成表单

暂无更多评论