Cute

基于antd 的简单封装，目的提升开发效率

借助antd form中的getFieldDecorator可以快捷的实现表单的初始赋值，表单的提交 地区组件基于antd Cascader，数据封装在组件里面，暂时未做通过接口获取省市区数据，组件体积较大

安装

npm

npm i @mandlazy/cute

yarn

yarn add @mandlazy/cute

使用方式

import { FormItem } from '@mandlazy/cute'
const configList = [
  {
    type: 'input',
    label: '收货人',
    key: 'receiverName',
    placeholder: '收货人'
  },
  {
    type: 'input',
    label: '手机号',
    key: 'phone',
    placeholder: '手机号'
  },
  {
    type: 'address',
    label: '地区',
    key: 'addressInfo',
    placeholder: '地区'
  }
]

...
const { getFieldDecorator } = this.props.form
return (
  <Form layout="horizontal" className="info-form">
    {this.state.itemList.map(item => (
      <FormItem
        formItemLayout={formItemLayout}
        getFieldDecorator={getFieldDecorator}
        item={item}
      />
    ))}
  </Form>
)

...
formValues = this.props.form.getFieldsValue()

属性

Address 组件

参数	类型	可选值	默认值	说明
initType	String	id/name	id	初始化默认值的方式
defaultValue	Array	-	''	设置默认值['北京市', '北京市', '朝阳区'] or ['1000', '1100', '1110']
resultType	String	spec	''	如果设置spec，则返回{'province': '北京市', 'city': ...}
resultMap	Array	-	[]	如果resultType=spec,则返回对象的key可以用resultMap做映射
placeholder	String	-	''	placeholder
onChange	Function	-	() => {}	选择项改变时的回调