[发明专利]一种基于配置项的通用系统搜索组件的封装方法

说明书

本发明提供了一种基于配置项的通用系统搜索组件的封装方法，属于前端技术领域，它解决了现有前端开发中重复代码过多等技术问题。本发明通过将已有的前端表单组件进一步进行抽象和封装，对不同的逻辑和数据通过配置项的方式传入，从而大大减少重复代码的编写，从而增加代码的可维护性和可拓展性。

技术领域

本发明属于前端技术领域，涉及一种基于配置项的通用系统搜索组件的封装方法。

背景技术

在目前的大部分公司以及企业的后台管理系统中，都会有各种各样的列表数据展示，必不可少的就在各种列表的顶部会有对应的数据筛选项，按照关键字进行搜索，从而得到系统管理员想要的信息。从前端开发的角度来看，每开发一个列表就需要相应地开发所对应的参数搜索功能，从代码的层面看就要开发一套相同的代码实现，这样的话多个列表功能就会有多套相同的代码实现，一方面代码的耦合性有所增加，另一方面也降低了前端的开发效率，而且对于项目后期的拓展和维护增加了工作量和难度。

目前比较常见的方式是对每个单独的表单组件进行不同程度的封装，比如常见的input、select、radio等最小粒度的表单组件，通过对他们进行封装来拓展出更加丰富的功能和API。我们可以根据业务需求选择不同的组件进行组合来完成各种功能，使用这种方式可以完成多重多样的功能，但是从代码上来说还存在一些不足：

1、开发逻辑相同而数据不同的功能会存在大量的相同代码会增加开发的工作量；

2、如果统一修改和优化一些功能，只能找出每个地方的代码一个个单独修改，不利于代码的维护。

随着前端技术的快速发展，各种框架、工具和组件库层出不穷，以对应不同系统地多样化功能需求，但是如何合理地利用这些已有的组件库进行开发的封装一直处于不断地发展中。

本发明就是利用现有的组件库中的相关组件再次进行合理地封装和逻辑复用，从而可以实现只通过配置相应的数据配置参数就能实现整个列表搜索功能。

发明内容

本发明的目的是针对现有的技术存在上述问题，提供了一种基于配置项的通用系统搜索组件的封装方法，本发明通过将已有的前端表单组件进一步进行抽象和封装，对不同的逻辑和数据通过配置项的方式传入，从而大大减少重复代码的编写，从而增加代码的可维护性和可拓展性。

本发明的目的可通过下列技术方案来实现：一种基于配置项的通用系统搜索组件的封装方法，其特征在于，该方法包括以下步骤：

步骤一，子组件主动触发事件；

步骤二，props输入配置项；

步骤三，配置项验证；

步骤四，验证失败，抛出错误项；验证成功，遍历配置项；动态生成表单模型和界面UI；

步骤五，通过样式处理和逻辑处理，读取源数据和额外配置属性，然后调用父组件；

步骤六，emit事件传出表单模型；

步骤七，完成。

本发明通过传入配置项的方式来封装通用的搜索组件，使管理系统格式各样的搜索区域只通过引入此组件完成搜索功能，使业务和数据进行解耦进而增加代码的可维护性和开发效率；关键点为组件内部的封装思想，通过遍历配置项动态生成不同的组件完成组件UI功能和数据的绑定。

进一步的，选用前端框架vue以及基于vue的一个组件库elementui作为基本依赖，使用其中的各种表单组件作为基础组件来进行封装。

进一步的，在前后端分离的web项目是通过http进行前后端数据的通信。

进一步的，相关配置项包括label、type、field、sourceData、extra。