表单配置项

可以在全局配置中配组件的一些公共属性。

设置配置

组件模式

html

<form-create :option="option"></form-create>

<form-create :option="option"></form-create>

全局方法

formCreate.create(rule,option)

formCreate.create(rule,option)

示例

数据结构

以ElementPlus为例

type Option = {
    global?: {
      '*':VNodeRule;
      [componentName:string]: VNodeRule;
    };
    injectEvent?: Object;
    preview?: Boolean;
    forceCoverValue?: Object;
    formData?: Object;
    el?: Element;
    onSubmit?: (formData: Object, api: Api) => void;
    beforeFetch?: (config: FetchEffectOption, form: {
      api: Api,
      rule: Rule
    }) => void;
    mounted?: (api: Api) => void;
    reload?: (api: Api) => void;
    col?: Boolean | ColProps & {
        show?: Boolean;
    };
    row?: Boolean | RowProps & {
        show?: Boolean;
    };
    info?: Boolean | VNodeRule & {
        show?: Boolean;
        native?: Boolean;
        icon?: string;
        align?: 'left' | 'right';
        info?: string;
    };
    wrap?: Boolean | (VNodeRule & FormItemProps & {show?: Boolean});
    form?: FormProps;
    submitBtn?: Boolean | ButtonProps & {
        click?: Function;
        innerText?: string;
        show?: Boolean;
    };
    resetBtn?: Boolean | ButtonProps & {
        click?: Function;
        innerText?: string;
        show?: Boolean;
    };
    title?: Boolean | VNodeRule & {
        show?: Boolean;
        native?: Boolean;
        title: string;
    };


}

type Option = {
    global?: {
      '*':VNodeRule;
      [componentName:string]: VNodeRule;
    };
    injectEvent?: Object;
    preview?: Boolean;
    forceCoverValue?: Object;
    formData?: Object;
    el?: Element;
    onSubmit?: (formData: Object, api: Api) => void;
    beforeFetch?: (config: FetchEffectOption, form: {
      api: Api,
      rule: Rule
    }) => void;
    mounted?: (api: Api) => void;
    reload?: (api: Api) => void;
    col?: Boolean | ColProps & {
        show?: Boolean;
    };
    row?: Boolean | RowProps & {
        show?: Boolean;
    };
    info?: Boolean | VNodeRule & {
        show?: Boolean;
        native?: Boolean;
        icon?: string;
        align?: 'left' | 'right';
        info?: string;
    };
    wrap?: Boolean | (VNodeRule & FormItemProps & {show?: Boolean});
    form?: FormProps;
    submitBtn?: Boolean | ButtonProps & {
        click?: Function;
        innerText?: string;
        show?: Boolean;
    };
    resetBtn?: Boolean | ButtonProps & {
        click?: Function;
        innerText?: string;
        show?: Boolean;
    };
    title?: Boolean | VNodeRule & {
        show?: Boolean;
        native?: Boolean;
        title: string;
    };


}

基础配置

全局配置由一下几个部分构成。

el

提供一个在页面上已存在的 DOM 元素作为表单的挂载目标,组件模式下无需设置

类型: Element

formData

表单初始值 (不是双向绑定)

类型: Object

forceCoverValue

设置通过v-model同步修改表单数据时,将modelValue中未定义的字段值为undefined, 默认为false

类型: bool

onSubmit

表单提交回调函数

类型:

  type onSubmit = (formData:Object, api:Api) => Promise;

  type onSubmit = (formData:Object, api:Api) => Promise;

示例：

通过 option 设置

{
  onSubmit:function(formData,fApi){
    //TODO ajax提交表单
  }
}

{
  onSubmit:function(formData,fApi){
    //TODO ajax提交表单
  }
}

通过标签设置

html

  <form-create @submit="onSubmit"></form-create>

  <form-create @submit="onSubmit"></form-create>

reload

表单重载后回调函数

类型:

  type reload = (api:Api) => void;

  type reload = (api:Api) => void;

示例：

通过 option 设置

{
  reload:function(fApi){
    //TODO 
  }
}

{
  reload:function(fApi){
    //TODO 
  }
}

通过标签设置

html

<form-create @reload="onReload"></form-create>

<form-create @reload="onReload"></form-create>

mounted

表单创建成功后回调函数

类型:

  type mounted = (api:Api) => void;

  type mounted = (api:Api) => void;

示例：

通过 option 设置

{
  mounted: function(fApi){
    //TODO 表单创建成功,可在此操作表单
  }
}

{
  mounted: function(fApi){
    //TODO 表单创建成功,可在此操作表单
  }
}

通过标签设置

html

<form-create @mounted="onMounted"></form-create>

<form-create @mounted="onMounted"></form-create>

beforeFetch

fetch请求前的回调

类型:

  type beforeFetch = (option:FetchEffectOption, form: {api:Api,rule:Rule}) => void;

  type beforeFetch = (option:FetchEffectOption, form: {api:Api,rule:Rule}) => void;

示例：

  {
    beforeFetch: function(config){
      config.headers = {token:'xxx'};
    }
  }

  {
    beforeFetch: function(config){
      config.headers = {token:'xxx'};
    }
  }

global

组件全局配置

类型: Object

type global = {
    [componentName:string]: VNodeRule;
    //匹配所有组件
    '*':VNodeRule;
}

type global = {
    [componentName:string]: VNodeRule;
    //匹配所有组件
    '*':VNodeRule;
}

示例：

设置所有组件

{
  global:{
    '*':{
      col:{
        span:12
      },
      props:{
        disabled:false
      }
    }
  }
}

{
  global:{
    '*':{
      col:{
        span:12
      },
      props:{
        disabled:false
      }
    }
  }
}

指定组件全局配置

类型：Object
说明：设置指定组件的全局配置,
示例：

  {
    global:{
      //设置 inputNumber 组件
      'inputNumber':{
        props:{
          disabled:true,
          precision:2
        }
      }
    }
  }

  {
    global:{
      //设置 inputNumber 组件
      'inputNumber':{
        props:{
          disabled:true,
          precision:2
        }
      }
    }
  }

这里的组件名称必须和生成规则里面 type 相同

UI框架配置

form

对应ui框架表单组件的整体配置

类型: Form

wrap

对应ui框架FormItem组件的整体配置

类型: FormItem

row

对应ui框架Row组件的整体配置

类型: Row&{show?:bool}|bool

col

对应ui框架Col组件的整体配置

类型: Col&{show?:bool}|bool

submitBtn

对应ui框架提交按钮(Button组件)的配置

类型:

type submitBtn = (Button&{show?:bool,click?:Function,innerText?:string})|bool

type submitBtn = (Button&{show?:bool,click?:Function,innerText?:string})|bool

resetBtn

对应ui框架重置按钮(Button组件)的配置

类型:

type resetBtn = (Button&{show?:bool,click?:Function,innerText?:string})|bool

type resetBtn = (Button&{show?:bool,click?:Function,innerText?:string})|bool

info

对应ui框架悬浮提示组件的配置

类型:

type info = ((TooltipProps|PopoverProps)& {
  show?: Boolean;
  native?: Boolean;
  icon?: string;
  align?: 'left' | 'right';
  info?: string;
})|bool

type info = ((TooltipProps|PopoverProps)& {
  show?: Boolean;
  native?: Boolean;
  icon?: string;
  align?: 'left' | 'right';
  info?: string;
})|bool

title

对应ui框架组件formItem组件中的label区域的配置

type title = (VNodeRule & {
  show?: Boolean;
  native?: Boolean;
  title?: string;
})|bool

type title = (VNodeRule & {
  show?: Boolean;
  native?: Boolean;
  title?: string;
})|bool

表单配置项 ​

设置配置 ​

示例 ​

数据结构 ​

基础配置 ​

el ​

formData ​

forceCoverValue ​

onSubmit ​

reload ​

mounted ​

beforeFetch ​

global ​

UI框架配置 ​

form ​

wrap ​

row ​

col ​

submitBtn ​

resetBtn ​

info ​

title ​

表单配置项

设置配置

示例

数据结构

基础配置

el

formData

forceCoverValue

onSubmit

reload

mounted

beforeFetch

global

UI框架配置

form

wrap

row

col

submitBtn

resetBtn

info

title