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

2022-02-21 1243

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>

微信关注我们

原文链接：https://www.oschina.net/news/183341/form-create-3-1-released

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

ModStart：拥抱新技术，率先支持 Laravel 9.0

Laravel 9.0 于 2020年2月8日发布，在发布后的第一时间 ModStart 技术团队进行了新技术研究和新框架的适配。ModStart + Laravel 9.0 版于2月11日开始内测。经过两个星期的内测，目前 3.2.0 正式对外发布。框架将支持两个LTS版本 ModStart 后续的迭代同时支持 Laravel 5.1 和 Laravel 9.0 两个版本，无论使用的是哪个版本，都将保持持续迭代更新，让您无需担忧。模块市场模块市场中的模块默认支持 Laravel 5.1，经过技术架构的改造，目前部分已经适配 Laravel 9.0，在模块功能介绍页面中，环境表示对于两个版本的支持情况。laravel5表示支持5.1版本，laravel9表示支持9.0版本，在模块下载前请查看模块对于框架的支持情况。 ModStart 将会不断创新，保持跟进前沿技术，帮您的业务稳步向前。

2022-02-21

506

GoEdge是一款可以帮你快速构建 CDN & WAF 平台的工具，支持HTTP、HTTPS、TCP、TLS、UDP、PROXY Protocol、IPv6、WAF等特性。 v0.4.1 主要提升系统性能和稳定性。 EdgeAdmin 功能增强： URL跳转可以设置是否保留URL查询参数部分地方输入域名支持连续的连字符优化IP名单气泡数字显示提升网站服务菜单打开速度增加API方法调用耗时统计，可以使用api-node debug开启优化demo模式进入命令 Bug修复修复单个服务访问日志不能使用集群、节点筛选的Bug 修复版本更新检查配置不起作用的Bug EdgeAPI 功能增强：服务配置变化时只发送单个服务配置变化通知（以前是发送所有服务配置）自动清理N天之前过期的IP条目优化节点离线通知增加api-node debug命令，执行后，可以在管理平台查看API方法耗时统计 Bug修复修复域名统计数据无法自动清理的Bug EdgeNode 功能增强：重构HTTP相关处理功能：缓存、压缩、WebP、限速，以提升稳定性 WAF规则提示错误时增加分组ID、规则...

2022-02-21

629

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。