UI配置

设置全局配置

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

构成

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

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

form

  • 类型：Object

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

  • 默认值:

    1. {
    3.   //是否开启行内表单模式
    4.   inline:false,
    5.   //表单域标签的位置，可选值为 left、right、top
    6.   labelPosition:'right',
    7.   //表单域标签的宽度，所有的 FormItem 都会继承 Form 组件的 label-width 的值
    8.   // labelPosition为"top"时,需要手动设置 labelWidth 为 undefined
    9.   labelWidth:125,
    10.   //是否显示校验错误信息
    11.   showMessage:true,
    12.   //原生的 autocomplete 属性，可选值为 off 或 on
    13.   autocomplete:'off',
    14.   //所有带有 size 属性的组件的尺寸，默认为不设置，详见各组件默认的 size 值。可选值为 default、small 或 large。
    15.   size:undefined
    17. }

  • 参考: Form props

row

  • 类型：Object

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

  • 默认值:

    1. {
    3.   //栅格间距，单位 px，左右平分
    4.   gutter:0,
    5.   //布局模式，可选值为flex或不选，在现代浏览器下有效
    6.   type:undefined,
    7.   //flex 布局下的垂直对齐方式，可选值为top、middle、bottom
    8.   align:undefined,
    9.   //flex 布局下的水平排列方式，可选值为start、end、center、space-around、space-between
    10.   justify:undefined,
    11.   //自定义的class名称
    12.   className:undefined
    14. }

  • 参考: Row props

submitBtn

  • 类型：Object

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

  • 默认值:

    1. {
    2.   //按钮类型，可选值为primary、ghost、dashed、text、info、success、warning、error或者不设置
    3.   type:"primary",
    4.   //按钮大小，可选值为large、small、default或者不设置
    5.   size:"large",
    6.   //按钮形状，可选值为circle或者不设置
    7.   shape:undefined,
    8.   //开启后，按钮的长度为 100%
    9.   long:true,
    10.   //设置button原生的type，可选值为button、submit、reset
    11.   htmlType:"button",
    12.   //设置按钮为禁用状态
    13.   disabled:false,
    14.   //设置按钮的图标类型
    15.   icon:"ios-upload",
    16.   //按钮文字提示
    17.   innerText:"提交",
    18.   //设置按钮为加载中状态
    19.   loading:false,
    20.   //是否显示,默认显示
    21.   show:true,
    22.   //设置提交按钮布局规则,参考栅格布局规则
    23.   col:undefined
    24. }

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

  • 参考: 布局规则 | Button_props

resetBtn

  • 类型：Object

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

  • 默认值:

    1. {
    3.   //配置说明同上
    4.   type:"ghost",
    5.   size:"large",
    6.   shape:undefined,
    7.   long:true,
    8.   htmlType:"button",
    9.   disabled:false,
    10.   icon:"refresh",
    11.   innerText:"重置",
    12.   loading:false,
    13.   //默认不显示
    14.   show:false,
    15.   //设置重置按钮布局规则,参考栅格布局规则
    16.   col:undefined
    17. }

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

  • 参考: 布局规则 | Button_props

info

  • 类型：Object

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

  • 默认值:

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

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

  • 提示组件: Poptop_props | Tooltip_props