UI配置

本文将介绍如何设置表单配置中的UI相关配置，并详细说明各个配置项的作用。

表单全局配置

设置表单配置

以下是设置表单配置的方法：

• 组件模式

在模板中设置表单配置：

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

• 全局方法

你还可以通过全局方法创建表单并设置表单配置：

window.formCreate.create(rule, option)

构成

全局配置中额外支持一下配置项

• form：表单整体显示规则配置
• row：表单组件布局配置
• submitBtn：提交按钮样式配置
• resetBtn：重置按钮样式配置
• info：组件提示消息配置
• wrap: 配置FormItem

配置表单(form)

• 类型：Object

• 说明：配置表单的整体显示规则，比如标签对齐方式和输入框对齐方式。

• 默认值:

  {
    layout: 'vertical',
    labelAlign: 'right',
    labelWidth: '125px'
  }
  

• 参考: Form props (opens new window)

配置布局(row)

• 类型：Object

• 说明：配置表单组件的布局，比如组件之间的间距。

• 默认值:

  {
      show: true,
      gutter: 0
  }
  

• 参考: Row props (opens new window)

配置提交按钮(submitBtn)

• 类型：Object

• 说明：配置提交按钮的样式和布局。

• 默认值:

  {
      theme: 'primary',
      loading: false,
      disabled: false,
      innerText: '提交',
      show: true,
      col: undefined,
      click: undefined
  }
  

  如果不需要显示提交按钮，可以将 submitBtn 设置为 false 或 submitBtn.show 设置为 false。

• 参考: 布局规则 | Button_props (opens new window)

配置重置按钮(resetBtn)

• 类型：Object

• 说明：配置重置按钮的样式和布局。

• 默认值:

  {
      theme: 'default',
      loading: false,
      disabled: false,
      innerText: '重置',
      show: false,
      col: undefined,
      click: undefined
  }
  

  如果需要显示重置按钮，可以将 resetBtn 设置为 true 或 resetBtn.show 设置为 true。

• 参考: 布局规则 | Button_props (opens new window)

悬浮提示框(info)

• 类型：Object

• 说明：组件提示消息配置

• 默认值:

  {
    //提示消息类型,popover,tooltip
    type: "popover",
    placement: 'topLeft',
    icon: 'question-circle-o'
  }
  

  可以在info配置项中设置提示组件的属性

• 提示组件: Popover_props (opens new window) | Tooltip_props (opens new window)

配置 FormItem(wrap)

• 类型：Object

• 说明：配置 FormItem 组件的显示规则，例如字段的样式和布局。

• 参考: FormItem_props (opens new window)