动态自定义表单封装

为什么要做这个动态表单呢?

  • 提高前端开发效率,是公司组件库中必不可少的一种组件。
  • 提高自身对Vue组件的理解和代码封装能力。

演示

dyform.gif

使用

企业微信20210607-174353.png

设计思路

  • 尽可能的通过json数据动态控制表单的内容、布局;
  • 可动态插入自定义组件作为表单项
  • 表单中所有IO项都能进行校验
  • 同一个基础组件可以有多种展示形态
  • 像使用原生组件一样配置表单数据,与监听基础组件触发事件

实现

  • 对基础组件进行二次封装,同一组件根据传入的componentsType不同展示不同的形态。
  • 使用listeners对数据和事件进行透传达到使用基础组件与原生组件一致的效果
  • 根据传入的json数据,动态双向绑定生成form所需的数据表单属性,实现统一校验功能

源码

如果觉的代码对您有用处请给个赞,谢谢大官人
iView组件二次封装

你可能感兴趣的:(动态自定义表单封装)