关于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 为例

1. 在 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)

1. 生成表单

在线示例

<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', 
                } 
            ]   
        }                                              
    ]
}

留神! handle优先级大于 value, 所有符合条件的control 都会失效

5. 表单验证

能够通过 validate 配置项设置组件的验证规定, 自定义的表单组件也反对校验

在线示例

例如设置 input 组件必填

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

留神!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 表单验证未通过})