0.0.5 • Published 4 years ago

fe-boltzmann v0.0.5

Weekly downloads
-
License
ISC
Repository
-
Last release
4 years ago

fe-boltzmann

基于ant design封装常用工具组件

JSON配置的表单组件 BaseForm 配置示例

使用

import React from 'react';
import { BaseForm } from 'fe-boltzmann';

export default class BaseFormDemo extends React.Component {
    render () {
      return (
        <BaseForm
          formItem={[
            {
              dataType: 'input',
              dataKey: 'name',
              label: '姓名',
              defaultValue: '',
              placeholder: '',
              rules: 'required',
              showRule: ''
            },
            {
              dataType: 'input',
              dataKey: 'age',
              label: '年龄',
              defaultValue: '',
              rules: 'required|number|max:1000|min:0|len:1,2',
              showRule: 'name eq 张三'
            },
          ]}
        />
      )
    }
}

API

属性&方法类型描述示例数据
formItemArray表单项[{dataType: 'input',dataKey: 'name',label: '姓名'},{dataType: 'input', dataKey:'age',label: '年龄'}]
formDataObject表单填充数据{name:"张三",age:15}
dataSourceObject表单源数据{position: [{value:1, label: "P1"},{value:2, label: "P2"}]}
uiConfigObject表单布局formItemLayout、groupItemLayout
onSubmitFunction提交回调-

formItem

属性描述options
dataType类型input、select、textarea、radio、group、buttons、custom
dataKey表单key-
labellabel-
defaultValue表单默认填充(不存在formData数据时生效)-
placeholder提示描述-
rules校验规则,例如:{rules: 'required|len:0,100'} 使用|分割required、email、mobile、id_card、yuan、len、max、min
showRule表单显示规则,例如:{showRule: 'userName eq 张三 | age gt 15'}eq(等于)、gt(大于)、lt(小于)、uneq(不等于)
validator自定义校验方法,参考antd使用规则 第四个属性为表单当前所有数据 方便校验validator:(rule, value, callback, params){}
element自定义元素,当dataType=custom时生效-
0.0.5

4 years ago

0.0.4

4 years ago

0.0.1

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

1.0.0

4 years ago