UI配置
设置全局配置
- 组件模式
html
<form-create :option="option"></form-create>
<form-create :option="option"></form-create>
- 全局方法
js
window.formCreate.create(rule,option)
window.formCreate.create(rule,option)
构成
全局配置中额外支持一下配置项
- form:表单整体显示规则配置
- row:表单组件布局配置
- submitBtn:提交按钮样式配置
- resetBtn:重置按钮样式配置
- info:组件提示消息配置
- wrap: 配置
FormItem
option.form
类型:
Object
说明:表单整体显示规则配置
默认值:
js
{
layout: 'vertical',
labelAlign: 'right',
labelWidth: '125px'
}
{
layout: 'vertical',
labelAlign: 'right',
labelWidth: '125px'
}
- 参考: Form props
option.row
类型:
Object
说明:表单组件布局配置
默认值:
js
{
show: true,
gutter: 0
}
{
show: true,
gutter: 0
}
- 参考: Row props
option.submitBtn
类型:
Object
说明:提交按钮样式和布局配置
默认值:
js
{
theme: 'primary',
loading: false,
disabled: false,
innerText: '提交',
show: true,
col: undefined,
click: undefined
}
{
theme: 'primary',
loading: false,
disabled: false,
innerText: '提交',
show: true,
col: undefined,
click: undefined
}
提交按钮配置,设置submitBtn=false或submitBtn.show=false时不显示按钮
- 参考: 布局规则 | Button_props
option.resetBtn
类型:
Object
说明:重置按钮样式和布局配置
默认值:
js
{
theme: 'default',
loading: false,
disabled: false,
innerText: '重置',
show: false,
col: undefined,
click: undefined
}
{
theme: 'default',
loading: false,
disabled: false,
innerText: '重置',
show: false,
col: undefined,
click: undefined
}
重置按钮默认配置,设置resetBtn=true或resetBtn.show=true时显示
- 参考: 布局规则 | Button_props
option. info
类型:
Object
说明:组件提示消息配置
默认值:
js
{
//提示消息类型,popover,tooltip
type: "popover",
placement: 'topLeft',
icon: 'question-circle-o'
}
{
//提示消息类型,popover,tooltip
type: "popover",
placement: 'topLeft',
icon: 'question-circle-o'
}
可以在info
配置项中设置提示组件的属性
- 提示组件: Popover_props | Tooltip_props
option.wrap
类型:
Object
说明:配置
FormItem
提示组件: FormItem_props