Skip to content

表单全局配置

在使用 FormCreate 生成表单时,可以通过全局配置来管理表单的行为和外观。本文将详细介绍如何设置全局配置,以及如何使用这些配置来增强表单的灵活性和可控性。

设置全局配置

组件模式

在组件模式下,通过 option 属性传递全局配置:

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

全局方法

在使用全局方法创建表单时,也可以传递全局配置:

js
formCreate.create(rule, option)

示例演示

以下是一个简单的示例,展示了如何使用全局配置设置表单的行为:

配置项数据结构

以下是 ElementPlus 版本中 Option 配置项的数据结构示例:

ts
type Option = {
    //设置组件默认配置
    global?: {
      '*':VNodeRule;
      [componentName:string]: VNodeRule;
    };
    //全局开启事件注入
    injectEvent?: Object|Boolean;
    //是否开启预览模式
    preview?: Boolean;
    //v-model是否更新未定义的字段值
    forceCoverValue?: Boolean;
    //v-model中是否保存不在规则中的字段
    appendValue?: Boolean;
    //设置表单的初始值(非双向绑定)
    formData?: Object;
    //用于指定表单挂载的 DOM 元素。在组件模式下无需设置。
    el?: Element;
    //表单提交时的回调函数。
    onSubmit?: (formData: Object, api: Api) => void;
    //在 fetch 请求前触发的回调,用于修改请求配置。
    beforeFetch?: (config: FetchEffectOption, form: {
      api: Api,
      rule: Rule
    }) => void;
    //表单创建成功后的回调函数。
    mounted?: (api: Api) => void;
    //表单重载后的回调函数。
    reload?: (api: Api) => void;
    //设置 Col 组件的整体配置。
    col?: Boolean | ColProps & {
        show?: Boolean;
    };
    //设置 Row 组件的整体配置。
    row?: Boolean | RowProps & {
        show?: Boolean;
    };
    //设置悬浮提示组件的配置。
    info?: Boolean | VNodeRule & {
        show?: Boolean;
        native?: Boolean;
        icon?: string;
        align?: 'left' | 'right';
        info?: string;
    };
    //设置 FormItem 组件的整体配置。
    wrap?: Boolean | (VNodeRule & FormItemProps & {show?: Boolean});
    //设置表单的整体配置,对应 UI 框架的表单组件。
    form?: FormProps;
    //设置提交按钮(Button 组件)的配置。
    submitBtn?: Boolean | ButtonProps & {
        click?: Function;
        innerText?: string;
        show?: Boolean;
    };
    //设置重置按钮(Button 组件)的配置。
    resetBtn?: Boolean | ButtonProps & {
        click?: Function;
        innerText?: string;
        show?: Boolean;
    };
    //设置 formItem 组件的 label 区域的配置。
    title?: Boolean | VNodeRule & {
        show?: Boolean;
        native?: Boolean;
        title: string;
    };


}

基础配置项详解

el

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

formData

  • 类型: Object
  • 说明: 设置表单的初始值 (非双向绑定)

forceCoverValue

  • 类型: bool
  • 说明: 当启用时,在通过 v-model 同步表单数据时,未定义的字段将被设置为 undefined。默认为 false

appendValue

  • 类型: bool
  • 说明: v-model中是否保存不在规则中的字段,默认为 true

injectEvent

  • 类型: Object | Boolean
  • 说明: 全局开启事件注入功能。如果设置为 true,则所有组件都将启用事件注入功能,允许在组件配置中直接定义事件处理逻辑。

onSubmit

表单提交回调函数

  • 类型:
ts
  type onSubmit = (formData:Object, api:Api) => Promise;
  • 说明: 表单提交时的回调函数。

  • 示例

js
  {
    onSubmit: function(formData, fApi) {
        // 处理表单提交
    }
  }

通过标签设置

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

reload

  • 类型:
ts
  type reload = (api:Api) => void;
  • 说明: 表单重载后的回调函数。

mounted

  • 类型:
ts
  type mounted = (api:Api) => void;
  • 说明: 表单创建成功后的回调函数。

beforeFetch

  • 类型:
ts
  type beforeFetch = (option:FetchEffectOption, form: {api:Api,rule:Rule}) => void;
  • 说明: 在 fetch 请求前触发的回调,用于修改请求配置。

  • 示例

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

global

组件全局配置

  • 类型: Object
ts
type global = {
    [componentName:string]: VNodeRule;
    //匹配所有组件
    '*':VNodeRule;
}
  • 说明: 设置全局组件配置,可以统一设置所有组件或指定组件的配置。

  • 示例

统一设置所有组件:

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

指定组件的全局配置:

  • 类型Object

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

  • 示例

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

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

UI框架配置

FormCreate 支持多个 UI 框架,每个框架的配置项略有不同。以下是各个框架的全局配置指南:

form

  • 类型: Object
  • 说明: 设置表单的整体配置,对应 UI 框架的表单组件。

wrap

  • 类型: Object
  • 说明: 设置 FormItem 组件的整体配置。

row

  • 类型: Row&{show?:bool}|bool
  • 说明: 设置 Row 组件的整体配置。

col

  • 类型: Col&{show?:bool}|bool
  • 说明: 设置 Col 组件的整体配置。

submitBtn

  • 类型:
ts
type submitBtn = (Button&{show?:bool,click?:Function,innerText?:string})|bool
  • 说明: 设置提交按钮(Button 组件)的配置。

resetBtn

  • 类型:
ts
type resetBtn = (Button&{show?:bool,click?:Function,innerText?:string})|bool
  • 说明: 设置重置按钮(Button 组件)的配置。

info

  • 类型:
ts
type info = ((TooltipProps|PopoverProps)& {
  show?: Boolean;
  native?: Boolean;
  icon?: string;
  align?: 'left' | 'right';
  info?: string;
})|bool
  • 说明: 设置悬浮提示组件的配置。

title

  • 类型:
ts
type title = (VNodeRule & {
  show?: Boolean;
  native?: Boolean;
  title?: string;
})|bool
  • 说明: 设置 formItem 组件的 label 区域的配置。

通过了解并灵活应用这些全局配置,您可以极大提升表单的可维护性和可扩展性,为项目开发带来更大的便利。

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用