form-create

UI配置

设置全局配置

  • 组件模式
<form-create :option="option"></form-create>
  • 全局方法
vm.$formCreate(rule,option)
window.formCreate.create(rule,option)

构成

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

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

option.form

  • 类型：Object

  • 说明：表单整体显示规则配置

  • 默认值:

    {
    hideRequiredMark: false,
    layout: 'horizontal',
    labelAlign: 'right',
    labelCol: {
        span: 4
    },
    wrapperCol: {
        span: 20
    },
    colon: undefined,
    validateOnRuleChange: true,
    //是否显示 label
    title: true
}

  • 参考: Form props

option.row

  • 类型：Object

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

  • 默认值:

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

  • 参考: Row props

option.submitBtn

  • 类型：Object

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

  • 默认值:

    {
    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时不显示按钮

  • 参考: 布局规则 | Button_props

option.resetBtn

  • 类型：Object

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

  • 默认值:

    {
    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时显示

  • 参考: 布局规则 | Button_props

option. info

  • 类型：Object

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

  • 默认值:

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

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

  • 提示组件: Popover_props | Tooltip_props

option.wrap