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 | - | () => {} | 选择项改变时的回调 |