FormCreate

Appearance

表单全局配置 ​

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

设置配置 ​

  • 组件模式
html
<form-create :option="option"></form-create>
<form-create :option="option"></form-create>
  • 全局方法
js
formCreate.create(rule,option)
formCreate.create(rule,option)

示例 ​

数据结构 ​

以ElementPlus为例

ts
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 ​

表单提交回调函数

  • 类型:
ts
  type onSubmit = (formData:Object, api:Api) => Promise;
  type onSubmit = (formData:Object, api:Api) => Promise;
  • 示例：

通过 option 设置

js
{
  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 ​

表单重载后回调函数

  • 类型:
ts
  type reload = (api:Api) => void;
  type reload = (api:Api) => void;
  • 示例：

通过 option 设置

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

通过标签设置

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

mounted ​

表单创建成功后回调函数

  • 类型:
ts
  type mounted = (api:Api) => void;
  type mounted = (api:Api) => void;
  • 示例：

通过 option 设置

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

通过标签设置

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

beforeFetch ​

fetch请求前的回调

  • 类型:
ts
  type beforeFetch = (option:FetchEffectOption, form: {api:Api,rule:Rule}) => void;
  type beforeFetch = (option:FetchEffectOption, form: {api:Api,rule:Rule}) => void;
  • 示例：
js
  {
    beforeFetch: function(config){
      config.headers = {token:'xxx'};
    }
  }
  {
    beforeFetch: function(config){
      config.headers = {token:'xxx'};
    }
  }

global ​

组件全局配置

  • 类型: Object
ts
type global = {
    [componentName:string]: VNodeRule;
    //匹配所有组件
    '*':VNodeRule;
}
type global = {
    [componentName:string]: VNodeRule;
    //匹配所有组件
    '*':VNodeRule;
}
  • 示例：

设置所有组件

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

指定组件全局配置

  • 类型：Object

  • 说明：设置指定组件的全局配置,

  • 示例：

js
  {
    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组件)的配置

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

resetBtn ​

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

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

info ​

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

  • 类型:
ts
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区域的配置

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