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',                 }             ]           }                                                  ]}
参数阐明类型
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是否必选booleanfalse
transform校验前转换字段值function(value) => transformedValue:any-
type内建校验类型，可选项string'string'
validator自定义校验function(rule, value, callback)-
whitespace必选时，空格是否会被视为谬误booleanfalse

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