[发明专利]一种下拉框组件

说明书

本发明涉及一种组件，其公开了提出一种下拉框组件，解决传统技术中的Vue.js提供的下拉框select组件使用效率低下的问题。该下拉框组件，包括：查询输入模块、数据捕获模块、下拉弹窗模块、选项提取模块、数据传送模块；本发明在用户输入同时捕获输入数据，并传送至后台，通过模糊查询并自动弹出弹窗，在弹窗中展示模糊查询的词条，用户单击展示的词条实现搜索。相比传统的select组件可极大地提高使用效率。本发明适用于需要提供下拉框进行查询的网页中。

技术领域

本发明涉及一种组件，具体涉及一种下拉框组件。

背景技术

作为一种构建用户界面的工具，毫无疑问Vue.js已经是最流行的前端框架之一，它具有很多非常实用而便捷的功能性组件。在实际的开发过程中，下拉框选择事件的使用率是很高的，需要调取后台中即将显示的下拉内容，并将用户的选择传送给后台，进行下一步的筛选和使用。

然而，传统技术中的Vue.js提供的下拉框select组件只可直接显示后台数据，或者显示前端定义好的数据，然后用户选中某个数据，通过绑定的按钮事件进行查询。由于需要绑定按钮事件，常常不适用于具体的业务实现，达不到需求方所要求的效果，并且需要用户点击触发下拉框，逐一查找需要的下拉内容，其使用效率低下。

发明内容

本发明所要解决的技术问题是：提出一种下拉框组件，解决传统技术中的Vue.js提供的下拉框select组件使用效率低下的问题。

本发明解决上述技术问题所采用的技术方案是：一种下拉框组件，包括：

查询输入模块，用于在组件运行时提供查询输入窗口供用户输入查询内容；

数据捕获模块，用于在用户输入查询内容的同时，捕获用户当前输入的数据，提交给数据传送模块；

下拉弹窗模块，用于根据后台模糊查询的数据自动弹出下拉弹窗，在弹窗中展示多个可供选择的下拉项；

选项提取模块，用于在用户点击弹窗中的某一个下拉项后，提取该下拉项的数据内容提交给查询输入模块在查询输入窗口中进行显示，同时将该下拉项的数据内容提交给数据传送模块；

数据传送模块，用于调用后台接口将捕获用户当前输入的数据传送至后台进行模糊查询，获取后台模糊查询的数据，提交给下拉弹窗模块；以及用于在获取选项提取模块提交的下拉项的数据内容时调用后台接口将所述数据内容传送给后台以实现对应的查询操作。

作为进一步优化，所述下拉框组件被封装后可进行移植和复用。

作为进一步优化，所述弹窗中的每一个下拉项显示后台模糊查询的一条与用户当前输入匹配的数据内容。

本发明的有益效果是：

本发明在用户输入同时捕获输入数据，并传送至后台，通过模糊查询并自动弹出弹窗，在弹窗中展示模糊查询的词条，用户单击展示的词条实现搜索。相比传统的select组件可极大地提高使用效率。

另外，在对该组件进行了封装操作后，以便于它的移植和复用。当前端开发人员需要实现这些功能的时候，只需在自己的前端代码中进行简单的组件引用即可。极大的减少了项目开发过程中一些不得不做，但实际略嫌冗余的开发操作，提高了开发的效率。

具体实施方式

本发明旨在提出一种下拉框组件，解决传统技术中的Vue.js提供的下拉框select组件使用效率低下的问题。本发明基于Vue.js技术，开发了一个简洁方便的下拉框组件，实现了弹出下拉弹窗，展示下拉信息，点击选择事件的功能。用户只需进行非常简单的操作即可达到目的。

本发明中的下拉框组件，包括：

查询输入模块，用于在组件运行时提供查询输入窗口供用户输入查询内容；