表单配置项
可以在全局配置中配组件的一些公共属性。
设置配置
- 组件模式
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