form-create

Appearance

全局方法 ​

调用方式

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

create ​

创建表单

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

getApi ​

通过 name 获取表单的 api

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

$form ​

获取form-create组件

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

toJson ​

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

  • 类型：
ts
type ToJson = (value:Rule[]|object) => string;
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)
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;
type ParseJson = (json:string) => Rule[]|object;
  • 用法：
js
const json = fApi.toJson()
const rule = formCreate.parseJson(json)
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;
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;
type Component = (name: string, component?: Component)=> Component|undefined;
  • 用法：
js
//挂载组件
formCreate.component('user',component)
//获取组件
const component = formCreate.component('user')
//挂载组件
formCreate.component('user',component)
//获取组件
const component = formCreate.component('user')

directive ​

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

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

register ​

注册自定义属性扩展

  • 类型：
ts
type Register = (name:string, effect:Effect) => void;
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},
      ];
  }
})
//挂载
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;
type SetData = (name:string,value:any) => void;
  • 用法：
js
 formCreate.setData('optionsA',[
        {label:'好用',value:0},
        {label:'快速',value:1},
        {label:'高效',value:2},
        {label:'全能',value:3},
 ]);
 formCreate.setData('optionsA',[
        {label:'好用',value:0},
        {label:'快速',value:1},
        {label:'高效',value:2},
        {label:'全能',value:3},
 ]);

removeData ​

移除自定义数据

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

copyRules ​

拷贝生成规则

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

copyRule ​

拷贝一个生成规则

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

parser ​

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

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

maker ​

规则生成器

  • 类型：object

  • 用法：

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

componentAlias ​

设置组件的别名

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

setModelField ​

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

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

factory ​

创建一个全新的 formCreate

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

use ​

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

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

useApp ​

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

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

Released under the MIT License.

Copyright © 2018-present Xaboy