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

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

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

查看所有标签

猜你喜欢:

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

码农书籍

疯传

乔纳·伯杰 (Jonah Berger) / 刘生敏、廖建桥 / 电子工业出版社 / 2014-1-1 / CNY 48.00

《疯传:让你的产品、思想、行为像病毒一样入侵》内容简介：是什么让事物变得流行？从买轿车、买衣服、吃三明治，到给孩子取名字，你是否知道为什么某些产品会大卖，某些故事被人们口口相传，某些电子邮件更易被转发，或者某些视频链接被疯狂地点击，某些谣言更具传播力，某些思想和行为像病毒一样入侵你的大脑……《疯传:让你的产品、思想、行为像病毒一样入侵》这本书将为你揭示这些口口相传和社会传播背后的科学秘密，并且告诉......一起来看看《疯传》这本书的介绍吧!

码农工具

RGB转16进制工具

RGB HEX 互转工具

XML、JSON 在线转换

在线XML、JSON转换工具