基于antd封装一个高可用form组件 减少cv代码

  在开发中台过程中 我们的原型中有很多表单,antd有表单组件,但是粒度比较细,就单纯组件而言,无可厚非,但是在开发过程中,可能会造成代码不够聚合,有些表单公共逻辑无法提取,copy paste比较多,所以可以加以封装,搞一个兼容性和扩展性都契合项目本身的组件。
  
  主要思路
  
  我简单查阅了一番资料,参考了一下别人的封装方式,决定以Col和FormItem作为基本单元,进行表单的搭建,主要原因
  
  可以将FormItem的信息和Col的信息以对象方式传入,这样我们可以更加专注于组件的包含的信息 减少CV代码可能导致的bug
  
  Col可以进行布局的调整,可以调整表单单元位置和所占宽度
  
  表单的组件形式是不定的,可能是input也有可能是select,所以可以进行外部传入,通用属性可以内部修改
  
  复用性高,可以用它来实现一个纯提交表单 和列表组件结合成可搜索表单 或者其他任何项目里需要自定义的一个表单
  
  实现细节
  
  抽象的FormItemInfo
  
  export interface FormItemInfo {
  
  name: string, //label
  
  id: string, // 属性
  
  colLayOut?: object,// 列布局
  
  formItemLayout?: object,// 表单项布局
  
  Comp?: any, // 传入的组件 不传默认input
  
  ruleArr?: RuleObj[],// 验证规则
  
  initialValue?: string, // 初始值
  
  required?: boolean, // 是否必填
  
  CompExtraProps?: object // 传入组件额外属性
  
  isDetail?: boolean //是否需要被getFieldDecorator托管
  
  }
  
  baseForm组件
  
  * @param name 表单项label
  
  * @param id 属性字段名
  
  * @param colLayOut 列布局
  
  * @param formItemLayout 表单项布局
  
  * @param Comp 传入的组件 不传默认input
  
  * @param ruleArr 验证规则 长度只需传入{max:xxx}验证信息是统一的
  
  * @param initialValue 初始值 编辑时推荐使用antd的mapPropsToFields 不要手动设置回显值
  
  * @param required 是否必填 默认否 因为要统一写验证提示
  
  * @param CompExtraProps 组件额外属性

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值