form-create 2.5.1 发布，强大的动态表单组件-低调大师

form-create 2.5.1 发布，强大的动态表单组件

2021-03-20 657

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

文档 | GitHub | 示例

支持 UI

element-ui
iview/view-design
ant-design-vue

2.5.1主要更新了一下内容:

新增 parent 和 children 属性
新增 sync 配置项, 支持 props 同步
修复 page 失效问题
修复 control 可能报错问题
修复全局配置 col 无效问题
优化内置组件插槽配置
优化 frame, group, sub-form, select 组件功能优化
优化 value 同步机制
优化 reload 机制
优化 validate, validateField 方法
优化表单销毁机制
优化参数注入
优化 typescript

安装

根据自己使用的 UI 安装对应的版本

element-ui 版本

npm i @form-create/element-ui

iview@2.x|3.x 版本

npm i @form-create/iview

iview/view-design@4.x 版本

npm i @form-create/iview4

ant-design-vue@1.5+ 版本

npm i @form-create/ant-design-vue

快速上手

本文以element-ui为例

在 main.js 中写入以下内容：

import Vue from 'vue'
import ELEMENT from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import formCreate from '@form-create/element-ui'

Vue.use(ELEMENT)
Vue.use(formCreate)

生成表单

在线示例

<template>
  <div id="app1">
      <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value"></form-create>
  </div>
</template>

export default {
    data() {
        return {
            //实例对象
            fApi: {},
            //表单数据
            value: {},
            //表单生成规则
            rule: [
                {
                    type: 'input',
                    field: 'goods_name',
                    title: '商品名称'
                },
                {
                    type: 'datePicker',
                    field: 'created_at',
                    title: '创建时间'
                }
            ],
            //组件参数配置
            option: {
                //表单提交事件
                onSubmit: function (formData) {
                    alert(JSON.stringify(formData))
                }
            }
        }
    }
}

规则介绍

type

类型: String
说明: 设置生成组件的名称

field

类型: String
说明: 设置表单组件的字段名称,自定义组件可以不配置

title

类型: String|Object
说明: 组件的名称

value

类型: any
说明: 表单组件的字段值,自定义组件可以不用设置

props

参数: Object
说明: 设置组件的props

info

类型: String|Object
说明: 设置组件的提示信息

hidden

类型: Bool
说明: 设置组件是否渲染

prefix

类型: string|Object
说明: 设置组件的前缀

suffix

类型: string|Object
说明: 设置组件的后缀

validate

类型: Array
说明: 设置表单组件的验证规则

options

类型: Array
说明: 设置radio,select,checkbox等组件option选择项

col

类型: Object
说明: 设置组件的布局规则

control

类型: Object
说明: 控制其他组件显示

children

类型: Array<rule|string|maker>

说明: 设置父级组件的插槽,默认为default.可配合 slot 配置项使用

示例1

formCreate.maker.create('button').children([
   '按钮内容' 
])

示例2

maker.input('text','text','text').children([
    maker.create('span').children(['append']).slot('append')
])

示例3

formCreate.maker.create('i-row').children([
  formCreate.maker.create('i-col').props('span',12).children([
    formCreate.maker.template('<span>自定义组件</span>',() => new Vue)
  ]),
])

功能介绍

1. 自定义组件

form-create 支持的在表单内部生成任何 vue 组件

在线示例

例如生成一个el-button组件:

{
	//type 可以是内置组件名称,也可以是vue组件名称或者 html 标签
	type: 'el-button',
   	//...
	children: ['按钮内容']
}

生成一个 html 标签

{
	//type 可以是内置组件名称,也可以是vue组件名称或者 html 标签
	type: 'span',
   	//...
	children: ['span内容']
}

注意! 生成的组件必须挂载到全局或者通过 form-create 挂载

通过 Vue 挂载

Vue.component(component.name, component);

通过 form-create 挂载

formCreate.component(component.name, component);

2. 自定义布局

通过设置配置项col或者栅格组件可以实现对组件的布局

在线示例

通过配置项col设置组件布局,设置一行显示两个组件

[
	{
        type:'input',
        field:'input1',
        title:'input1',
        col:{span:12}
	},{
        type:'input',
        field:'input2',
        title:'input2',
        col:{span:12}
	},
]

通过栅格组件设置一行显示三个组件

{
	type:'el-row',
   	children: [
    	{
        	type:'el-col',
        	props:{
            	span:8
        	},
        	children: [{type:'input',field:'input1',title:'input1'}]
        },
    	{
        	type:'el-col',
        	props:{
            	span:8
        	},
        	children: [{type:'input',field:'input1',title:'input1'}]
        },
    	{
        	type:'el-col',
        	props:{
            	span:8
        	},
        	children: [{type:'input',field:'input1',title:'input1'}]
        }
    ]
}

3. 组件前后缀

通过生成规则的prefix属性配置组件的前缀,suffix属性配置组件的后缀

在线示例

{
    type:'input',
    field:'text',
    title:'text',
    prefix:'prefix',
    suffix:'suffix',
}

设置前后缀为自定义组件

{
    type:'input',
    field:'text',
    title:'text',
    value:'default',
    prefix:{
        type:'ElButton', children:['prefix']
    },
    suffix:{
        type:'ElButton', children:['suffix']
    },
}

4.组件联动

可以通过control配置项实现通过组件的值控制其他组件是否显示

在线示例

例如当评价小于3星时输入差评原因

{
    type:'rate',
    field: 'star',
    title:'评分',
    value:5,
    control:[
        {
            handle(val){
                return val < 3
            },
            rule:[
                {
                    type:'input',
                    field:'info',
                    title:'差评原因',
                    value:'default info', 
                } 
            ]   
        }                                              
    ]
}

参数	说明	类型
value	当组件的值和`value`全等时显示`rule`中的组件	string\|Number\|Bool
handle	当`handle`方法返回`true`时显示`rule`中的组件	Function
rule	该组件控制显示的组件	Array
append	设置`rule`中的规则追加的位置	string
prepend	设置`rule`中的规则前置插入的位置	string
child	设置`rule`是否插入到指定位置的children中,默认添加到当前规则的 children 中	Boolean

注意! handle优先级大于value,所有符合条件的control都会生效

5. 表单验证

可以通过 validate 配置项设置组件的验证规则,自定义的表单组件也支持校验

在线示例

例如设置input 组件必填

{
	type:'input',
	//...
	validate:[{required:true, type:'string', message:'请个输入内容'}]
}

参数	说明	类型	默认值
enum	枚举类型	string	-
len	字段长度	number	-
max	最大长度	number	-
message	校验文案	string	-
min	最小长度	number	-
pattern	正则表达式校验	RegExp	-
required	是否必选	boolean	`false`
transform	校验前转换字段值	function(value) => transformedValue:any	-
type	内建校验类型，可选项	string	'string'
validator	自定义校验	function(rule, value, callback)	-
whitespace	必选时，空格是否会被视为错误	boolean	`false`

注意!type需要根据组件的value类型定

APi 介绍

下列是常用的方法

完整的Api介绍

设置表单值

覆盖方式,未定义的字段会设置为 null

type coverValue = (formData:{[field:string]:any}) => void

用法：

fApi.coverValue({goods_name:'HuaWei'})

合并方式,未定义的字段不做修改

interface setValue {
    (formData:{[field:string]:any}): void
    (field:string, value:any): void
}

用法：

fApi.setValue({goods_name:'HuaWei'})

别名方法changeValue, changeField

隐藏字段

interface hidden {
    //隐藏全部组件
    (status:Boolean):void
    //隐藏指定组件
    (status:Boolean, field:string):void
    //隐藏部分组件
    (status:Boolean, field:string[]):void 
}

用法：

fApi.hidden(true, 'goods_name')

获取组件隐藏状态

type hiddenStatus = (field:string)=>Boolean

用法：

const status = fApi.hiddenStatus('goods_name')

获取规则

interface getRule {
    (field:string):Rule
    (field:string, origin: true): FormRule
}

用法：

const rule = fApi.getRule('goods_name')

插入规则

前置插入

interface prepend {
    //插入到第一个
    (rule:FormRule):void 
    //插入指定字段前面
    (rule:FormRule, field:string):void
    //插入到指定字段 children 中
    (rule:FormRule, field:string, child:true):void
}

用法：

fApi.prepend({
     type:"input",
     title:"商品简介",
     field:"goods_info",
     value:"",
     props: {
         "type": "text",
         "placeholder": "请输入商品简介",
     },
     validate:[
         { required: true, message: '请输入商品简介', trigger: 'blur' },
     ],
}, 'goods-name')

后置追加

interface append {
    //插入到最后一个
    (rule:FormRule):void 
    //插入指定字段后面
    (rule:FormRule, field:string):void
    //插入到指定字段 children 中
    (rule:FormRule, field:string, child:true):void
}

用法：

fApi.append({
     type:"input",
     title:"商品简介",
     field:"goods_info",
     value:"",
     props: {
         "type": "text",
         "placeholder": "请输入商品简介",
     },
     validate:[
         { required: true, message: '请输入商品简介', trigger: 'blur' },
     ],
}, 'goods-name')

删除指定规则

type removeRule = (rule:FormRule) => FormRule

用法：

const rule = {type:'input', /** ... **/}
fApi.removeRule(rule)

验证表单

type validate = (callback:(...args:any[]) => void)=> void

用法：

fApi.validate((valid, fail) => {
    if(valid){
        //todo 表单验证通过
    }else{
        //todo 表单验证未通过
    }
})

验证指定字段

type validateField = (field, callback:(...args:any[]) => void)=> void

用法：

fApi.validateField('goods_name', (valid, fail) => {
    if(valid){
        //todo 字段验证通过
    }else{
        //todo 字段验证未通过
    }
})

获取表单数据

interface formData {
    //获取全部数据
    (): {[field:string]:any }
    //获取部分字段的数据
    (field:string[]): {[field:string]:any }
}

用法：

const formData = fApi.formData()

修改提交按钮

type submitBtnProps = (props:Object) => void

用法：

fApi.submitBtnProps({disabled:true})

快捷操作:
- fApi.btn.loading(true) 设置提交按钮进入loading状态
- fApi.btn.disabled(true) 设置提交按钮禁用状态
- fApi.btn.show(true) 设置提交按钮显示状态

修改重置按钮

type resetBtnProps = ( props:Object) => void

用法：

fApi.resetBtnProps({disabled:true})

快捷操作:
- fApi.resetBtn.loading(true) 设置重置按钮进入loading状态
- fApi.resetBtn.disabled(true) 设置重置按钮禁用状态
- fApi.resetBtn.show(true) 设置重置按钮显示状态

隐藏表单

type hideForm = (hide:Boolean)=>void

用法：

fApi.hideForm(true)

提交表单

type submit = (success: (formData: FormData, $f: fApi) => void, fail: ($f: fApi) => void)=> void

用法：

fApi.submit((formData, fapi) => {
    //todo 提交表单
},()=>{
    //todo 表单验证未通过
}

微信关注我们

原文链接：https://www.oschina.net/news/133890/form-create-2-5-1-released

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

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

我在阿里实习做开源

我在阿里实习做开源 3月19日，初春的杭州，依旧阴雨朦胧。透过 EFC 健身房的落地窗往外看，远处的楼宇、青山、整齐的街道和稀疏的车辆在水雾中若隐若现。午后的小憩时光，我拿了瓶咖啡回到工位，看着刚刚提交的PR通过了CI check，这或许是我人生中作为实习生的最后一天了。成长的过程就是不断经历和体验的过程，一段又一段不同心境的开始和结束。我希望三个月后，那个过了22岁生日的年轻人会如愿顺利拿到毕业证，再次出现在这里，我想那时的他一定更熟悉 java 了吧。本科时光循规蹈矩的大学生涯大概是是四年本科和三年硕士，而我属于校园的时光，只有两年半。在外实习到现在已经整整一年了，从北京到深圳再到杭州，我也非常庆幸能拥有这样的经历。三段不同方向的实习，从最一开始在学校里的 GoOnline 在线 IDE 项目，让我对真正落地的开发项目充满了向往；到 “互享“ 平台运维开发，让我对企业落地的日常开发运维流程有所了解；再到看点业务开发与需求上线，让我对拥有百万用户的项目和技术充满了激情；再到中间件研发，专注于云原生领域的探索和落地。第一段实习是在北京图森科技，期间充满了懵懂和纠结的，纠结于...

2021-03-20

594

本次更新如下开放JWT秘钥配置权限丢弃FastJson改用Jackson JWT秘钥配置权限在配置类重写此方法即可 @Override public JWTConfig jwtConfig() { JWTConfig jwtConfig = new JWTConfig(); // token失效时间单位，默认: 秒 jwtConfig.setCalendarField(Calendar.SECOND); // token失效时间，默认: 86400秒 jwtConfig.setCalendarInterval(86400); // 秘钥，默认: 一个UUID jwtConfig.setSecret(UUID.randomUUID().toString()); return jwtConfig; } 改用Jackson后有哪些影响除了实体类映射有影响之外，其他地方均不受影响一、实体类的字段映射开发中经常出现这种情况，实体类的命名规范是驼峰，而数据库字段是下划线分割，所以会出现对不上的情况，这个时候我们可以用这个注解来解决： com.fasterxm...

2021-03-20

696

资源下载

更多资源

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应用均可从中受益。