Skip to content

全局方法

调用方式

通过导入formCreate,来调用下列方法, 例如formCreate.component(xxx)

create

创建表单

  • 类型
ts
type Create = (rules:Rule[], options:object) => Api;
  • 用法
js
const fApi = formCreate.create(rules, options)

getApi

通过 name 获取表单的 api

  • 类型
ts
type GetApi = (name:string) => Api | Api[];
  • 用法
html
<form-create name="form" :rule="rule" />
js
const api = formCreate.getApi('form')

$form

获取form-create组件

  • 类型
ts
type $form = () => Component;
  • 用法
js
const $formCreate = formCreate.$form()
//全局挂载
app.component('form-create',$formCreate)

toJson

将指定生成规则转换为json字符串

  • 类型
ts
type ToJson = (value:Rule[]|object) => string;
  • 用法
js
const json = formCreate.toJson([{
  type:'input',
  field:'goods_name',
  title:'商品名称',
  value:'form-create'
}]);
const rule = formCreate.parseJson(json)

parseJson

将json字符串转换为表单的生成规则

  • 类型
ts
type ParseJson = (json:string) => Rule[]|object;
  • 用法
js
const json = fApi.toJson()
const rule = formCreate.parseJson(json)

fetch

内置的 fetch 方法, 用于请求数据, 支持重写

  • 类型
ts
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;

component

在 form-create 中挂载自定义组件

  • 类型
ts
type Component = (name: string, component?: Component)=> Component|undefined;
  • 用法
js
//挂载组件
formCreate.component('user',component)
//获取组件
const component = formCreate.component('user')

directive

在 form-create 中挂载自定义指令

  • 类型
ts
type Directive = (name:string, directive:Directive) => void;
  • 用法
js
//挂载
formCreate.directive('autofocus',(el)=>{
  el.focus();
})

register

注册自定义属性扩展

  • 类型
ts
type Register = (name:string, effect:Effect) => void;
  • 用法
js
//挂载
formCreate.register('loadOptions', {
  component:'select',
  init(rule){
      rule.props.options = [
        {label:'好用',value:0},
        {label:'快速',value:1},
        {label:'高效',value:2},
        {label:'全能',value:3},
      ];
  }
})

setData

挂载自定义数据

  • 类型
ts
type SetData = (name:string,value:any) => void;
  • 用法
js
 formCreate.setData('optionsA',[
        {label:'好用',value:0},
        {label:'快速',value:1},
        {label:'高效',value:2},
        {label:'全能',value:3},
 ]);

removeData

移除自定义数据

  • 类型
ts
type RemoveData = (name:string) => void;
  • 用法
js
formCreate.removeData('optionsA');

copyRules

拷贝生成规则

  • 类型
ts
type CopyRules = (rules:Rule[]) => Rule[];
  • 用法
js
const rules = formCreate.copyRules([{
  type:'input',
  field:'goods_name',
  title:'商品名称',
  value:'form-create'
}])

copyRule

拷贝一个生成规则

  • 类型
ts
type CopyRule = (rule:Rule) => Rule;
  • 用法
js
 const rule = formCreate.copyRule({
  type:'input',
  field:'goods_name',
  title:'商品名称',
  value:'form-create'
})

parser

绑定一个表单组件的表单值解析器

  • 类型
ts
type Parser = (name:string,parser:Parser) => void;
  • 用法
js
formCreate.parser({
    name:'input',
    toFormValue(val){
        return parseFloat(val)||0
    }
})

maker

规则生成器

  • 类型object

  • 用法

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

componentAlias

设置组件的别名

  • 类型
ts
type ComponentAlias = (alias:{[aliasName:string]:string }) => void;
  • 用法
js
formCreate.componentAlias({btn:'ElButton'})

setModelField

自定义表单组件值的双向绑定字段名称,默认为modelValue

ts
type SetModelField = (componentName:string,propName:string) => void;
  • 用法
js
formCreate.setModelField('input','value');

factory

创建一个全新的 formCreate

  • 类型
ts
type Factory = () => FormCreate;
  • 用法
js
const subFormCreate = formCreate.factory()

use

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

  • 类型
ts
type Use = (formCreate:FormCreate, opt:object) => FormCreate;

useApp

组件初始化时会通过 app 被回调

  • 类型
ts
type UseApp = (formCreate:FormCreate, app:App) => void;