# 全局 Api

调用方式:

全局

formCreate.parseJson(json)

在Vue中

vm.$formCreate.parseJson(json)

# create

  • 类型Function

  • 参数

    • Array rules
    • Object options
  • 返回值

    • Object fApi
  • 说明:生成表单

  • 用法

    const fApi = formCreate.create(rules, options) 
    

# getApi v2.5.20+

  • 类型Function

  • 参数

    • String name
  • 说明

    通过全局方法获取表单的api

  • 用法

    <form-create name="form" :rule="rule" />
    
    const api = formCreate.getApi('form')
    

# use v2.5.0+

  • 类型Function

  • 参数

    • Function|Object rules
  • 说明

    安装 formCreate 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 formCreate 作为参数传入。

    该方法需要在表单生成之前被调用。

# init

  • 类型Function

  • 参数

    • Array rules
    • Object options
  • 返回值

    • Function mount 挂载表单
    • Function remove 移除表单
    • Function destroy 销毁表单
    • Object $f
  • 说明:创建一个表单构造器

  • 用法

    const {$f,mount,remove,destroy} = formCreate.init(rules,options) 
    
    //挂载表单到#app
    mount(document.getElementById('app'))
    //销毁表单
    remove()
    

# component

  • 类型Function

  • 参数

    • string id
    • Object component
  • 说明:在 form-create 中挂载自定义组件

  • 用法

    //挂载组件
    formCreate.component('test',component)
    //获取组件
    const component = formCreate.component('test')
    

# directive v2.5.0+

  • 类型Function

  • 参数

    • string id
    • Object directive
  • 说明:在 form-create 中挂载自定义指令

  • 用法

    //挂载
    formCreate.directive('test',directive)
    

# register v2.5.0+

  • 类型Function

  • 参数

    • string id
    • Object effect
  • 说明:挂载自定义属性扩展

  • 用法

    //挂载
    formCreate.register(effect)
    

# createParser < v2.5.0

  • 类型Function

  • 返回值

    • Parser parser
  • 说明:创建一个新的组件解析器

  • 用法

    const Parser = formCreate.createParser()
    

# setParser < v2.5.0

  • 类型Function

  • 参数

    • string componentName
    • Parser parser
  • 说明:绑定一个组件解析器

  • 用法

    const Parser = formCreate.createParser()
    Parser.prototype.toFormValue = (value)=>parseFloat(value)||0
    
    formCreate.setParser('inputNumber',Parser)
    

# parser v2.5.0+

  • 类型Function

  • 参数

    • Object parser
  • 说明:绑定一个组件解析器

  • 用法

    formCreate.parser({
        name:'input',
        toFormValue(val){
            return parseFloat(val)||0
        }
    })
    

# maker

  • 类型Object

  • 说明组件生成器

  • 用法

    rule = maker.input('testTitle','testField','testValue')
    

# componentAlias v2.5.0+

  • 类型Object

  • 说明:设置组件的别名

  • 用法

    formCreate.componentAlias({btn:'ElButton'})
    

# $form

  • 类型Function

  • 说明:绑定一个组件解析器

  • 用法

    $formCreate = formCreate.$form()
    
    //局部挂载 formCreate
    new Vue({
        components:{
          'form-create':$formCreate
        }
    })
    
    //全局挂载
    Vue.component('form-create',$formCreate)
    
    

# parseJson v0.0.4+

  • 类型Function

  • 参数

    • String json
    • Boolean mode v1.0.5
  • 说明:将json转换为生成规则,为向下兼容增加第二个参数,mode:true时使用新版本解析(版本>1.0.5推荐第二个参数固定传 true)

  • 用法

     const json = fApi.toJson()
     const rule = formCreate.parseJson(json, true)
    

# toJson v2.5.3+

  • 类型Function

  • 参数

    • String Rule[]
    • string | number space
  • 说明:将指定生成规则转换为json

# fetch v2.5.3+

  • 类型

    type fetch = (options: {
      //接口
      action: String;
      //请求方式
      method?: String;
      //调用接口附带数据
      data?: Object;
      //调用接口附带数据的提交方式,默认为 `formData`
      dataType?: 'json';
      //自定义 header 头信息
      headers?: Object;
      //接口调用成功回调
      onSuccess: (body: any) => void
      //接口调用失败回调
      onError?: (e: Error | ProgressEvent) => void;
    })=> void;
    
  • 说明:内置的 fetch, 用于加载数据

# copyRules v2.5.0+

  • 类型Function

  • 参数

    • array rules
  • 说明:拷贝生成规则

  • 用法

     const rules = formCreate.copyRules(rules)
    

# copyRule v2.5.0+

  • 类型Function

  • 参数

    • array rule
  • 说明:拷贝生成规则

  • 用法

     const rule = formCreate.copyRule(rule)
    

# factory v2.5.8+

  • 类型Function

  • 说明:创建一个全新的 formCreate

  • 用法

     const subFormCreate = formCreate.factory()
    

# vm.$formCreate

  • 类型Function

  • 参数

    • Array rules
    • Object options
  • 返回值

    • Object $f
  • 属性:以上所有

  • 说明:生成表单

  • 用法

    new Vue({
      mounted(){
        const $f = this.$formCreate(rules,options) 
      }
    })