关于javascript:formcreate25版本来啦动态表单轻松搞定

form-create 是一个能够通过 JSON 生成具备动静渲染、数据收集、验证和提交性能的表单生成组件。反对3个UI框架，并且反对生成任何 Vue 组件。内置20种罕用表单组件和自定义组件，再简单的表单都能够轻松搞定。

文档 | GitHub | 示例

反对 UI

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

新增性能

2.5版本次要更新了一下性能:

重构外部外围代码
优化外部渲染机制
优化外部生命周期事件
重构 TypeScript
新增 nextTick办法,设置渲染后的回调
新增反对分页加载组件,减速首屏渲染
新增自定义配置项effect
新增反对批改type
新增 control反对配置规定插入地位
优化 control符合条件的都会失效,之前版本只能失效第一个
新增反对给组件配置前缀后缀 prefix, suffix
新增 update配置,value发送变动后触发
新增反对 wrap 配置项,配置FormItem
新增 object 组件
新增反对自定义title,info组件
新增富文本组件wangEditor
新增原生事件反对事件注入
反对 value.sync 获取双向绑定的 formData
优化默认的表单提交按钮

装置

依据本人应用的 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 表单验证未通过
})

关于javascript:formcreate25版本来啦动态表单轻松搞定

反对 UI

新增性能

装置

疾速上手

规定介绍

type

field

title

value

props

info

hidden

prefix

suffix

validate

options

col

control

children

性能介绍

1. 自定义组件

2. 自定义布局

3. 组件前后缀

4.组件联动

5. 表单验证

APi 介绍

设置表单值

暗藏字段

获取规定

插入规定

删除指定规定

验证表单

验证指定字段

获取表单数据

批改提交按钮

批改重置按钮

暗藏表单

提交表单

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复