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

栏目: 软件资讯 · 发布时间: 3年前

内容简介：form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持4个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。文...

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 3.1 发布，动态表单组件/适配 4 个 UI 框架

使用 <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 框架》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Is Parallel Programming Hard, And, If So, What Can You Do About

Paul E. McKenney

The purpose of this book is to help you understand how to program shared-memory parallel machines without risking your sanity.1 By describing the algorithms and designs that have worked well in the pa......一起来看看《Is Parallel Programming Hard, And, If So, What Can You Do About 》这本书的介绍吧!

码农工具