表单全局配置
在使用 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 框架,每个框架的配置项略有不同。以下是各个框架的全局配置指南:
- Element Plus 表单全局配置
- Ant Design Vue 表单全局配置
- Naive UI 表单全局配置
- Arco Design 表单全局配置
- TDesign 表单全局配置
- Vant 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 区域的配置。
通过了解并灵活应用这些全局配置,您可以极大提升表单的可维护性和可扩展性,为项目开发带来更大的便利。