乐趣区

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

jiezi

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 是否必选 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 表单验证未通过})
退出移动版