UI配置

设置全局配置

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

构成

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

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

form

  • 类型：Object

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

  • 默认值:

    1. {
    2.   //行内表单模式
    3.   inline: false,
    4.   //表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
    5.   labelPosition: 'right',
    6.   //表单域标签的后缀
    7.   labelSuffix: undefined,
    8.   //是否显示必填字段的标签旁边的红色星号
    9.   hideRequiredAsterisk: false,
    10.   //表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。
    11.   labelWidth: '125px',
    12.   //是否显示校验错误信息
    13.   showMessage: true,
    14.   //是否以行内形式展示校验信息
    15.   inlineMessage: false,
    16.   //是否在输入框中显示校验结果反馈图标
    17.   statusIcon: false,
    18.   //是否在 rules 属性改变后立即触发一次验证
    19.   validateOnRuleChange: true,
    20.   //是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效
    21.   disabled: false,
    22.   //用于控制该表单内组件的尺寸 medium / small / mini
    23.   size: undefined,
    24. }

  • 参考: Form props

row

  • 类型：Object

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

  • 默认值:

    1. {
    2.   //栅格间隔
    3.   gutter: 0,
    4.   //布局模式，可选 flex，现代浏览器下有效
    5.   type: undefined,
    6.   //flex 布局下的垂直排列方式 top/middle/bottom
    7.   align: undefined,
    8.   //flex 布局下的水平排列方式 start/end/center/space-around/space-between
    9.   justify: undefined,
    10.   //自定义元素标签
    11.   tag: 'div'
    12. }

  • 参考: Row props

submitBtn

  • 类型：Object

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

  • 默认值:

    1. {
    2.   //类型 primary / success / warning / danger / info / text
    3.   type: "primary",
    4.   //尺寸 medium / small / mini
    5.   size: "medium",
    6.   //是否朴素按钮
    7.   plain: false,
    8.   //是否圆角按钮
    9.   round: false,
    10.   //是否圆形按钮
    11.   circle: false,
    12.   //是否加载中状态
    13.   loading: false,
    14.   //是否禁用状态
    15.   disabled: false,
    16.   //图标类名
    17.   icon: 'el-icon-upload',
    18.   //按钮宽度
    19.   width: '100%',
    20.   //是否默认聚焦
    21.   autofocus: false,
    22.   //原生 type 属性
    23.   nativeType: "button",
    24.   //按钮内容
    25.   innerText: "提交",
    26.   //按钮是否显示
    27.   show: true,
    28.   //按钮布局规则
    29.   col: undefined,
    30.   //按钮点击事件
    31.   click: undefined,
    32. }

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

  • 参考: 布局规则 | Button_props

resetBtn

  • 类型：Object

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

  • 默认值:

    1. {
    2.   type: "default",
    3.   size: "medium",
    4.   plain: false,
    5.   round: false,
    6.   circle: false,
    7.   loading: false,
    8.   disabled: false,
    9.   icon: 'el-icon-refresh',
    10.   width: '100%',
    11.   autofocus: false,
    12.   nativeType: "button",
    13.   innerText: "重置",
    14.   show: false,
    15.   col: undefined,
    16.   click: undefined,
    17. }

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

  • 参考: 布局规则 | Button_props

info

  • 类型：Object

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

  • 默认值:

    1. {
    2.   //提示消息类型,popover,tooltip
    3.   type:"popover"
    4. }

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

  • 提示组件: Popover_props | Tooltip_props