FormCreate

Appearance

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
  {
      hideRequiredMark: false,
      layout: 'horizontal',
      labelAlign: 'right',
      labelCol: {
          span: 4
      },
      wrapperCol: {
          span: 20
      },
      colon: undefined,
      validateOnRuleChange: true,
      //是否显示 label
      title: true
  }
  {
      hideRequiredMark: false,
      layout: 'horizontal',
      labelAlign: 'right',
      labelCol: {
          span: 4
      },
      wrapperCol: {
          span: 20
      },
      colon: undefined,
      validateOnRuleChange: true,
      //是否显示 label
      title: true
  }

option.row ​

  • 类型：Object

  • 说明：表单组件布局配置

  • 默认值:

js
  {
      gutter: 0,
      type: undefined,
      align: undefined,
      justify: undefined
  }
  {
      gutter: 0,
      type: undefined,
      align: undefined,
      justify: undefined
  }

option.submitBtn ​

  • 类型：Object

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

  • 默认值:

js
  {
      disabled: false,
      ghost: false,
      icon: 'upload',
      loading: false,
      shape: undefined,
      size: undefined,
      type: 'primary',
      block: true,
      innerText: '提交',
      htmlType: undefined,
      show: true,
      col: undefined,
      click: undefined,
  }
  {
      disabled: false,
      ghost: false,
      icon: 'upload',
      loading: false,
      shape: undefined,
      size: undefined,
      type: 'primary',
      block: true,
      innerText: '提交',
      htmlType: undefined,
      show: true,
      col: undefined,
      click: undefined,
  }

提交按钮配置,设置submitBtn=false或submitBtn.show=false时不显示按钮

option.resetBtn ​

  • 类型：Object

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

  • 默认值:

js
  {
      disabled: false,
      ghost: false,
      icon: 'sync',
      loading: false,
      shape: undefined,
      size: undefined,
      type: 'default',
      block: true,
      innerText: '重置',
      htmlType: undefined,
      show: false,
      col: undefined,
      click: undefined
  }
  {
      disabled: false,
      ghost: false,
      icon: 'sync',
      loading: false,
      shape: undefined,
      size: undefined,
      type: 'default',
      block: true,
      innerText: '重置',
      htmlType: undefined,
      show: false,
      col: undefined,
      click: undefined
  }

重置按钮默认配置,设置resetBtn=true或resetBtn.show=true时显示

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配置项中设置提示组件的属性

option.wrap ​