CN113535295A - 基于element-UI的筛选框的交互方法、装置、计算机设备和介质 - Google Patents

Abstract

本申请涉及一种基于element‑UI的筛选框的交互方法、装置、计算机设备和计算机可读存储介质，响应于针对基于element‑UI的筛选框的选中操作，显示悬浮框，悬浮框中展示选择区和分页栏，选择区展示预设选项，分页栏列出分页号；响应于针对预设选项的选中操作，将被选中选项在筛选框中显示；响应于针对分页号的切换操作，将被选中选项与经过切换操作后的当前分页号对应的预设选项进行对比，若预设选项存在被选中选项的情况下，将被选中选项以预设样式在悬浮框中显示。在筛选交互过程中，无论切换到哪个分页，在当前分页的预设选项存在被选中选项情况下，将被选中选项基于预设样式显示，实现已选中的选项和未选中的选项在显示效果上作区分，避免用户进行重复的选择。

Description

基于element-UI的筛选框的交互方法、装置、计算机设备和 介质

技术领域

本申请涉及计算机技术领域，特别是涉及一种基于element-UI的筛选框的交互方法、装置、计算机设备和计算机可读存储介质。

背景技术

随着计算机技术的发展，筛选框的交互被广泛应用，现有的筛选框的交互方法虽然可以实现大数据量的筛选，但是在页面切换后已选中的选项和未选中的选项没有作区分，导致用户在无感知的情况下，可能会重复选择已经选中的选项，进一步地可能会将用户已选中的选项去选中。

针对相关技术中，在筛选交互中已选中的选项和未选中的选项没有作区分，导致用户存在重复选择的问题，目前尚未提出有效的解决方案。

发明内容

基于此，有必要针对上述技术问题，提供一种基于element-UI的筛选框的交互方法、装置、计算机设备和计算机可读存储介质。

第一方面，本申请实施例提供了一种基于element-UI的筛选框的交互方法，所述方法包括：

响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框，所述悬浮框中展示选择区和分页栏，所述选择区展示至少两个预设选项，所述分页栏列出分页号，所述分页号包括默认分页号；

响应于针对所述默认分页号对应的第一预设选项的第二选中操作，将与所述第二选中操作对应的选项作为被选中选项，并在所述筛选框中显示所述被选中选项；

响应于针对所述分页号的切换操作，将所述被选中选项与经过所述切换操作后的当前分页号对应的第二预设选项进行对比，得到第一比对结果；

在所述第一比对结果指示所述第二预设选项存在所述被选中选项的情况下，将所述被选中选项以预设样式在所述悬浮框中显示。

在其中一些实施例中，检测到所述筛选框的模式是单选模式的情况下，所述方法还包括：

响应于所述第二选中操作，关闭所述悬浮框；

再次响应于针对基于element-UI的筛选框的所述第一选中操作，显示所述悬浮框；

将所述被选中选项与所述第一预设选项进行对比，得到第二比对结果；

在所述第二比对结果指示所述预设选项存在所述被选中选项的情况下，将所述被选中选项以预设样式在所述悬浮框中显示。

在其中一些实施例中，在检测到所述筛选框的模式是单选模式的情况下，所述响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框之后，所述方法还包括：

在所述分页栏中添加阻止冒泡事件；

响应于针对分页栏的第三选中操作，基于所述阻止冒泡事件，继续显示所述悬浮框。

在其中一些实施例中，在检测到所述筛选框的模式是多选模式的情况下，所述响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框之后，所述方法还包括：

在所述选择区和所述分页栏中都添加阻止冒泡事件；

响应于针对所述选择区的第四选中操作和所述分页栏的第三选中操作，基于所述阻止冒泡事件，继续显示所述悬浮框；

响应于针对指定区域的第五选中操作，关闭所述悬浮框；其中，所述指定区域是为除所述悬浮框区域外的区域。

在其中一些实施例中，所述分页栏还包括：分页跳转输入框、所述预设选项的总数和预设的单页中展示的预设选项的总数；所述响应于针对基于 element-UI的筛选框的第一选中操作还包括：

获取所述预设的单页中展示的预设选项的总数；

根据所述预设的单页中展示的预设选项的总数将所述预设选项在所述悬浮框中进行展示。

在其中一些实施例中，所述预设样式包括第一预设样式和第二预设样式，所述第二预设样式包括第一颜色和第二颜色；所述将所述被选中选项以预设样式在所述悬浮框中显示包括：

以第一预设样式显示所述被选中选项；其中，所述第一预设样式包括高亮格式或加粗格式；和/或，

以所述第一颜色显示所述被选中选项，并以所述第二颜色显示所述预设选项中的未选中选项。

第二个方面，在本实施例中提供了一种基于element-UI的筛选框的交互装置，所述装置包括显示模块、选中模块、比对模块和结果模块：

所述显示模块，用于响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框，所述悬浮框中展示选择区和分页栏，所述选择区展示至少两个预设选项，所述分页栏列出分页号，所述分页号包括默认分页号；

所述选中模块，用于响应于针对所述默认分页号对应的第一预设选项的第二选中操作，将与所述第二选中操作对应的选项作为被选中选项，并在所述筛选框中显示所述被选中选项；

所述比对模块，用于响应于针对所述分页号的切换操作，将所述被选中选项与经过所述切换操作后的当前分页号对应的第二预设选项进行对比，得到第一比对结果；

所述结果模块，用于在所述第一比对结果指示所述第二预设选项存在所述被选中选项的情况下，将所述被选中选项以预设样式在所述悬浮框中显示。

第三个方面，在本实施例中提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述方法的步骤。

第四个方面，在本实施例中提供了计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。

上述基于element-UI的筛选框的交互方法、装置、计算机设备和计算机可读存储介质，其中基于element-UI的筛选框的交互方法包括响应于针对基于 element-UI的筛选框的第一选中操作，显示悬浮框，所述悬浮框中展示选择区和分页栏，所述选择区展示至少两个预设选项，所述分页栏列出分页号，所述分页号包括默认分页号；响应于针对所述默认分页号对应的第一预设选项的第二选中操作，将与所述第二选中操作对应的选项作为被选中选项，并在所述筛选框中显示所述被选中选项；响应于针对所述分页号的切换操作，将所述被选中选项与经过所述切换操作后的当前分页号对应的第二预设选项进行对比，得到第一比对结果；在所述第一比对结果指示所述第二预设选项存在所述被选中选项的情况下，将所述被选中选项以预设样式在所述悬浮框中显示。在筛选交互过程中，无论切换到哪个分页，将被选中选项与当前分页的预设选项进行实时对比，在当前分页的预设选项存在被选中选项情况下，将被选中选项基于预设样式显示，实现已选中的选项和未选中的选项在显示效果上作区分，避免用户进行重复的选择。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例提供的基于element-UI的筛选框的交互方法的应用场景图；

图2是根据本申请实施例提供的基于element-UI的筛选框的交互方法的流程图一；

图3是根据本申请实施例提供的基于element-UI的筛选框的交互方法的流程图二；

图4是根据本申请实施例提供的基于element-UI的筛选框的交互装置的结构示意图；

图5是根据本申请实施例提供的基于element-UI的筛选框的交互计算机设备的结构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

需要说明的是，本发明实施例所涉及的术语“第一”、“第二”、“第三”仅仅是区别类似的对象，不代表针对对象的特定排序，“第一”、“第二”、“第三”在允许的情况下可以互换特定的顺序或先后次序。可以理解地，“第一”、“第二”、“第三”区分的对象在适当情况下可以互换，以使这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

在本申请的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本申请和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本申请的限制。

在本申请的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本申请中的具体含义。

除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中在本发明的说明书中所使用的术语只是为了描述具体的实施方式的目的，不是旨在于限制本发明。本文所使用的术语“和/或”包括一个或多个相关的所列项目的任意的和所有的组合。本文所使用的术语“多个”指的是两个及以上。

图1为一个实施例中基于element-UI的筛选框的交互方法的应用场景图。服务器101和移动终端102之间均可以通过网络进行数据传输。其中，移动终端102用于获取用户选中操作，并将用户选中操作传输至服务器101中。首先，在服务器101接收到基于element-UI的筛选框的第一选中操作后，显示悬浮框，悬浮框中展示选择区和分页栏，选择区展示至少两个预设选项，分页栏列出分页号，分页号包括默认分页号；其次，在服务器101接收到针对默认分页号对应的第一预设选项的第二选中操作，将与第二选中操作对应的选项作为被选中选项，并在筛选框中显示被选中选项；最后，在服务器101接收到针对分页号的切换操作，将被选中选项与经过切换操作后的当前分页号对应的第二预设选项进行对比，在第二预设选项存在被选中选项的情况下，将被选中选项以预设样式在悬浮框中显示。其中，服务器101可以由独立的服务器或者是多个服务器组成的服务器集群来实现，移动终端102可以为任意一种带选中功能的显示屏。

本申请实施例一提供了一种基于element-UI的筛选框的交互方法，如图2 所示，该方法包括如下步骤：

步骤S210，响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框，悬浮框中展示选择区和分页栏，选择区展示至少两个预设选项，分页栏列出分页号，分页号包括默认分页号。

element-UI是基于VUE2.0的组件库，提供了丰富的PC端组件和配套设计资源。第一选中操作可以是用户通过鼠标点击选中，也可以是用户通过触屏选中，在此不作限定。当默认分页号可以是第一页，如果有需要，此默认分页号可以根据需求被设置。预设选项个数较多的时候，可以将预设选项分均分布到每个分页里，并通过分页号进行索引，例如，若预设选项共有120个，此时可以结合实际情况，将这120个预设选项以一组10个选项分布至每个分页，则在分页栏中显示的分页号为页码1至12，每页分页显示对应的10个选项，相对于在一个分页中展示所有预设选项，这种实现方式对大数据量的展示比较友好。

步骤S220，响应于针对默认分页号对应的第一预设选项的第二选中操作，将与第二选中操作对应的选项作为被选中选项，并在筛选框中显示被选中选项。

第二选中操作可以是用户通过鼠标点击选中，也可以是用户通过触屏选中，在此不作限定。此外，筛选框的模式可以被设置成单选模式或者多选模式，基于element-UI的筛选框的组件内部会根据给出的参数来判定具体使用哪种模式，默认情况是单选模式，当获取到组件给出的参数是multiple时，筛选框的模式为多选模式。当筛选框的模式为单选模式，被选中选项只能是一个；当筛选框的模式是多选模式，被选中选项可以是一个，也可以是多个。无论被选中选项有多少个，被选中的选项都会被显示在筛选框中。

步骤S230，响应于针对分页号的切换操作，将被选中选项与经过切换操作后的当前分页号对应的第二预设选项进行对比，得到第一比对结果。

切换操作可以是用户通过鼠标点击选中，也可以是用户通过触屏选中，在此不作限定。切换操作可以是对各分页号的任意一次或者多次选中操作。例如，所有分页号可以包括页码1至10，且上述默认分页号可以是1。用户可以对页码为5的分页号进行选择等切换操作，则此时响应于该切换操作，悬浮框中显示的当前分页号为页码5，可以将通过上述步骤S220得到的在筛选框中显示的被选中选项，实时地与页码5中的所有预设选项，即上述第二预设选项进行对比，得到比对结果。或者，该用户在进行上述选中页码5的切换操作后，还可以继续进行针对其他分页号的切换操作；例如，该用户可以重新选择上述默认分页号，即页码1，则此时通过将上述被选中选项再次实时地和该页码1中的所有预设选项进行比对并得到比对结果，因此实现了只要检测到有针对分页号被选中的切换操作，就会将筛选框中的被选中选项与当前被选中分页号对应的第二预设选项进行实时对比，得到比对结果。

步骤S240，在第一比对结果指示第二预设选项存在被选中选项的情况下，将被选中选项以预设样式在悬浮框中显示。

第一比对结果包括指示上述被选中选项与上述第二预设选项比对成功，以及指示该被选中选项与该第二预设选项比对失败两种结果，当在第一比对结果指示比对成功的情况下，将被选中选项以预设样式在悬浮框中显示；当在第一比对结果指示失败的情况下，不作任何操作。

相关技术中，数据量较大时难以在筛选选项过程中区别显示被选中选项和未选中选项，而本申请通过上述步骤S210至S240，在大数据量筛选交互过程中，无论切换到哪个分页，都会将被选中选项与当前分页的预设选项进行实时对比，以便在当前分页的预设选项存在被选中选项情况下，将被选中选项基于预设样式显示，从而能够通过翻页展示不同分页下的不同选项，并且分页操作不影响选项选中的显示状态，实现已选中的选项和未选中的选项在显示效果上作区分，避免用户进行重复的选择。

进一步地，如图3所示，在其中一个实施例中，在检测到筛选框的模式是单选模式的情况下，包括以下步骤：

步骤S221，响应于第二选中操作，关闭悬浮框；当筛选框的模式是默认的单选模式，实现在识别到有预设选项被选中的情况下，不需要用户有额外的操作，悬浮框可自动关闭。这是筛选框做的一个交互的优化处理，因为单选模式下，预设选项被选中后，悬浮框就没有存在的必要了。

步骤S222，再次响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框；当检测到有针对基于element-UI的筛选框的第一选中操作，悬浮框可再次被打开。

步骤S223，将被选中选项与第一预设选项进行对比，得到第二比对结果；悬浮框被再次打开时，分页号可以选择性地停留在悬浮框关闭前所在分页号，也可以是停留在默认分页号，可以根据需求人为设置，例如悬浮框关闭之前所在分页号是5，悬浮框被再次打开所在的分页号位置可以设置成默认分页号1，可以设置成悬浮框关闭前的分页号5。根据所在分页号展示预设选项，基于分页号所在位置，第一预设选项可能与第二预设选项相同，也可能不同。再次从筛选框中获取被选中选项，将被选中选项就会与当前所在分页号对应的第一预设选项进行对比，得到比对结果。

步骤S224，在第二比对结果指示预设选项存在被选中选项的情况下，将被选中选项以预设样式在悬浮框中显示。

第二比对结果包括指示上述被选中选项与上述第一预设选项比对成功，以及指示该被选中选项与该第一预设选项比对失败两种结果，当在第二比对结果指示比对成功的情况下，将被选中选项以预设样式在悬浮框中显示；当在第二比对结果指示比对失败的情况下，不作任何操作。

相关技术中，不能实现单选模式下获取到点击后悬浮框就关闭的功能，此外不能实现悬浮框被再次打开时区别显示被选中选项和未选中选项，而本申请通过上述步骤S221至S224，首先，当筛选框的模式是默认的单选模式时，实现在识别到有预设选项被选中的情况下，不需要用户有额外的操作，悬浮框可自动关闭。其次，当悬浮框被再次打开，已经被选中选项以预设样式在悬浮框中显示，实现在悬浮框关闭再打开后已选中的选项和未选中的选项在显示效果上作区分。

相应地，在其中一个实施例中，在检测到筛选框的模式是单选模式的情况下，响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框之后，包括以下步骤：在分页栏中添加阻止冒泡事件；响应于分页栏的第三选中操作，基于阻止冒泡事件，继续显示悬浮框。

第三选中操作可以是用户通过鼠标点击选中，也可以是用户通过触屏选中，在此不作限定。由于在单选模式下，如果不作任何处理，获取到点击操作后悬浮框就关闭，当获取到分页栏的选中操作会被错误地识别成预设选项的选中操作，此时会触发悬浮框关闭事件。在分页栏组件上的事件中加入阻止事件冒泡的方法，阻止分页事件联动悬浮框关闭，能够保证分页功能更好地使用。

在其中一个实施例中，在检测到筛选框的模式是多选模式的情况下，响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框之后，还包括以下步骤：

在选择区和分页栏中都添加阻止冒泡事件；

响应于针对选择区的第四选中操作和分页栏的第三选中操作，基于阻止冒泡事件，继续显示悬浮框；

响应于针对指定区域的第五选中操作，关闭悬浮框；其中，指定区域是为除悬浮框区域外的区域。第五选中操作可以是通过鼠标点击选中，也可以是触屏选中，在此不作限定。

在筛选框模式是多选模式的情况下，可以选中多个预设选项，为了能够保证可以在选中选项后悬浮框不会被关闭，在选择区的事件中加入阻止事件冒泡的方法，阻止预设选项选中事件联动悬浮框关闭。其次，和单选模式对分页栏的处理一样，在分页栏组件上的事件中加入阻止事件冒泡的方法，阻止分页事件联动悬浮框关闭，能够保证分页功能更好地使用。当选中操作完成后需要关闭悬浮框时，点击悬浮框以外的区域即可将悬浮框关闭。此外，当悬浮框被再次打开，和单选模式对已经被选中选项的处理方式一样，将已经被选中选项以预设样式在悬浮框中显示，实现在悬浮框关闭再打开后已选中的选项和未选中的选项在显示效果上作区分。

在选择区和分页栏都加上阻止冒泡的方法，保证无论是点击选择区还是分页栏，无论怎么点击都不会关闭悬浮框。

另外地，在其中一个实施例中，在检测到筛选框的模式是搜索模式的情况下，响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框之后，还包括以下步骤：

响应于针对筛选框的搜索操作，获取搜索操作对应的搜索信息；当获取到组件给出的参数是search时，筛选框的模式为搜索模式。

根据搜索信息从所有预设选项中筛选得到指定选项，并在悬浮框展示指定选项；其中，指定选项和搜索信息相匹配。例如在筛选框中输入“黄”，从所有预设选项中筛选得到含“果”相关的指定选项，将这些指定选项在悬浮框中展示出来，如“果冻”，“果冻包”，“果冻鞋”，“果盘”，“果茶”等，并且指定选项会分页进行展示。如果在筛选框中再输入“冻”，筛选框中的搜索信息变成“果冻”，那么悬浮框中展示的和“果冻”相匹配的指定选项也实时更新，变成“果冻”，“果冻包”，“果冻鞋”等。

搜索操作通过在筛选框中输入搜索信息实现，将获取到的搜索信息传递给后端，后端将指定选项连同分页参数一起返回，可以实现实时搜索分页的功能，提高了大数据量下筛选框交互的效率。

在其中一个实施例中，分页栏还包括：分页跳转输入框、预设选项的总数和预设的单页中展示的预设选项的总数；响应于针对基于element-UI的筛选框的第一选中操作还包括：

获取预设的单页中展示的预设选项的总数；

根据预设的单页中展示的预设选项的总数将预设选项在悬浮框中进行展示。

分页跳转输入框存在的意义是通过获取分页跳转输入框中的分页号直接跳转至目标分页号，一般当分页过多时，不可能将每个分页号都展示出来，中间的分页号是以省略号的形式展现。当需要切换到中间某分页时，分页跳转输入框的存在可以很大程度上减少切换分页的工作量。

预设的单页中展示的预设选项的总数是可以被设置的，可以通过用户输入指定的数字的方式被设置，也可以通过给出参考选项由用户进行切换选择被设置。选择区会根据获取到的预设的单页中展示的预设选项的总数适配不同的效果。选择区的高度一般为显示10个预设选项，预设的单页中展示的预设选项的总数如果超过10个，选择区右边会出现滚动条，若需要查看当前分页的所有预设选项，需要下拉滚动条进行查看；当预设的单页中展示的预设选项的总数小于10个，选择区的大小根据具体的数量进行自适应，选择区不会出现一片空白的现象。

预设选项的总数为所有预设选项的总数，根据预设的单页中展示的预设选项的总数将所有预设选项分配到各个分页上。

分页跳转输入框、预设选项的总数和预设的单页中展示的预设选项的总数的存在在一定程度上可以使筛选框的交互更加友好。

在其中一个实施例中，预设样式包括第一预设样式和第二预设样式，第二预设样式包括第一颜色和第二颜色；将被选中选项以预设样式在悬浮框中显示包括：

以第一预设样式显示被选中选项；其中，第一预设样式包括高亮格式或加粗格式；和/或，

以第一颜色显示被选中选项，并以第二颜色显示预设选项中的未选中选项。第一颜色和第二颜色一般选择一组区别很明显的颜色，具体地，第一颜色可以是红色，第二颜色可以是黑色，以方便用户快速定位到被选中选项。

无论是以上述哪种预设样式突出被选中选项，功能实现上十分简单，效果上也是十分明显。

本实施例还提供了一种基于element-UI的筛选框的交互装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。上述基于 element-UI的筛选框的交互装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。尽管在以下实施例中所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能被构想的。

图4是根据本发明实施例中基于element-UI的筛选框的交互的示意图，如图4所示，提供了一种基于element-UI的筛选框的交互装置50，该装置包括显示模块51、选中模块52、比对模块53和结果模块54。

显示模块51，用于响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框，悬浮框中展示选择区和分页栏，选择区展示至少两个预设选项，分页栏列出分页号，分页号包括默认分页号；

选中模块52，用于响应于针对默认分页号对应的第一预设选项的第二选中操作，将与第二选中操作对应的选项作为被选中选项，并在筛选框中显示被选中选项；

比对模块53，用于响应于针对分页号的切换操作，将被选中选项与经过切换操作后的当前分页号对应的第二预设选项进行对比，得到第一比对结果；

结果模块54，用于在第一比对结果指示第二预设选项存在被选中选项的情况下，将被选中选项以预设样式在悬浮框中显示。

上述基于element-UI的筛选框的交互装置50在筛选交互过程中，无论切换到哪个分页，将被选中选项与当前分页的预设选项进行实时对比，在当前分页的预设选项存在被选中选项情况下，将被选中选项基于预设样式显示，实现已选中的选项和未选中的选项在显示效果上作区分，避免用户进行重复的选择。

在其中一个实施例中，选中模块52还包括响应于第二选中操作，关闭悬浮框；再次响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框；将被选中选项与第一预设选项进行对比，得到第二比对结果；在第二比对结果指示预设选项存在被选中选项的情况下，将被选中选项以预设样式在悬浮框中显示。

在其中一个实施例中，选中模块52还包括：在检测到筛选框的模式是单选模式的情况下，在分页栏中添加阻止冒泡事件；响应于针对分页栏的第三选中操作，基于阻止冒泡事件，继续显示悬浮框。

在其中一个实施例中，选中模块52还包括：在检测到筛选框的模式是多选模式的情况下，在选择区和分页栏中都添加阻止冒泡事件；响应于针对选择区的第四选中操作和分页栏的第三选中操作，基于阻止冒泡事件，继续显示悬浮框；响应于针对指定区域的第五选中操作，关闭悬浮框；其中，指定区域是为除悬浮框区域外的区域。

在其中一个实施例中，显示模块51还包括：在检测到筛选框的模式是搜索模式的情况下，响应于针对筛选框的搜索操作，获取搜索操作对应的搜索信息；根据搜索信息从所有预设选项中筛选得到指定选项，并在悬浮框展示指定选项；其中，指定选项和搜索信息相匹配。

在其中一个实施例中，显示模块51还包括：获取预设的单页中展示的预设选项的总数；根据预设的单页中展示的预设选项的总数将预设选项在悬浮框中进行展示。

在其中一个实施例中，结果模块54还包括：以第一预设样式显示被选中选项；其中，第一预设样式包括高亮格式或加粗格式；和/或，以第一颜色显示被选中选项，并以第二颜色显示预设选项中的未选中选项。

需要说明地是，上述各个模块可以是功能模块也可以是程序模块，既可以通过软件实现，也可以通过硬件来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图5所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储预设配置信息集合。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现上述基于element-UI的筛选框的交互方法。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种基于element-UI的筛选框的交互方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图5中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框，悬浮框中展示选择区和分页栏，选择区展示至少两个预设选项，分页栏列出分页号，分页号包括默认分页号；

响应于针对默认分页号对应的第一预设选项的第二选中操作，将与第二选中操作对应的选项作为被选中选项，并在筛选框中显示被选中选项；

响应于针对分页号的切换操作，将被选中选项与经过切换操作后的当前分页号对应的第二预设选项进行对比，得到第一比对结果；

在第一比对结果指示第二预设选项存在被选中选项的情况下，将被选中选项以预设样式在悬浮框中显示。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

响应于第二选中操作，关闭悬浮框；

再次响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框；

将被选中选项与第一预设选项进行对比，得到第二比对结果；

在第二比对结果指示预设选项存在被选中选项的情况下，将被选中选项以预设样式在悬浮框中显示。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

在分页栏中添加阻止冒泡事件；

响应于针对分页栏的第三选中操作，基于阻止冒泡事件，继续显示悬浮框。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

在选择区和分页栏中都添加阻止冒泡事件；

响应于针对选择区的第四选中操作和分页栏的第三选中操作，基于阻止冒泡事件，继续显示悬浮框；

响应于针对指定区域的第五选中操作，关闭悬浮框；其中，指定区域是为除悬浮框区域外的区域。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

响应于针对筛选框的搜索操作，获取搜索操作对应的搜索信息；

根据搜索信息从所有预设选项中筛选得到指定选项，并在悬浮框展示指定选项；其中，指定选项和搜索信息相匹配。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

获取预设的单页中展示的预设选项的总数；

根据预设的单页中展示的预设选项的总数将预设选项在悬浮框中进行展示。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

以第一预设样式显示被选中选项；其中，第一预设样式包括高亮格式或加粗格式；和/或，

以第一颜色显示被选中选项，并以第二颜色显示预设选项中的未选中选项。

上述存储介质，响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框，悬浮框中展示选择区和分页栏，选择区展示至少两个预设选项，分页栏列出分页号，分页号包括默认分页号；响应于针对默认分页号对应的第一预设选项的第二选中操作，将与第二选中操作对应的选项作为被选中选项，并在筛选框中显示被选中选项；响应于针对分页号的切换操作，将被选中选项与经过切换操作后的当前分页号对应的第二预设选项进行对比，得到第一比对结果；在第一比对结果指示第二预设选项存在被选中选项的情况下，将被选中选项以预设样式在悬浮框中显示。在筛选交互过程中，无论切换到哪个分页，将被选中选项与当前分页的预设选项进行实时对比，在当前分页的预设选项存在被选中选项情况下，将被选中选项基于预设样式显示，实现已选中的选项和未选中的选项在显示效果上作区分，避免用户进行重复的选择。

应该明白的是，这里描述的具体实施例只是用来解释这个应用，而不是用来对它进行限定。根据本申请提供的实施例，本领域普通技术人员在不进行创造性劳动的情况下得到的所有其它实施例，均属本申请保护范围。

显然，附图只是本申请的一些例子或实施例，对本领域的普通技术人员来说，也可以根据这些附图将本申请适用于其他类似情况，但无需付出创造性劳动。另外，可以理解的是，尽管在此开发过程中所做的工作可能是复杂和漫长的，但是，对于本领域的普通技术人员来说，根据本申请披露的技术内容进行的某些设计、制造或生产等更改仅是常规的技术手段，不应被视为本申请公开的内容不足。

“实施例”一词在本申请中指的是结合实施例描述的具体特征、结构或特性可以包括在本申请的至少一个实施例中。该短语出现在说明书中的各个位置并不一定意味着相同的实施例，也不意味着与其它实施例相互排斥而具有独立性或可供选择。本领域的普通技术人员能够清楚或隐含地理解的是，本申请中描述的实施例在没有冲突的情况下，可以与其它实施例结合。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对专利保护范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (10)

1.一种基于element-UI的筛选框的交互方法，其特征在于，所述方法包括：

响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框，所述悬浮框中展示选择区和分页栏，所述选择区展示至少两个预设选项，所述分页栏列出分页号，所述分页号包括默认分页号；

响应于针对所述默认分页号对应的第一预设选项的第二选中操作，将与所述第二选中操作对应的选项作为被选中选项，并在所述筛选框中显示所述被选中选项；

响应于针对所述分页号的切换操作，将所述被选中选项与经过所述切换操作后的当前分页号对应的第二预设选项进行对比，得到第一比对结果；

在所述第一比对结果指示所述第二预设选项存在所述被选中选项的情况下，将所述被选中选项以预设样式在所述悬浮框中显示。

2.根据权利要求1所述的基于element-UI的筛选框的交互方法，其特征在于，在检测到所述筛选框的模式是单选模式的情况下，所述方法还包括：

响应于所述第二选中操作，关闭所述悬浮框；

再次响应于针对基于element-UI的筛选框的所述第一选中操作，显示所述悬浮框；

将所述被选中选项与所述第一预设选项进行对比，得到第二比对结果；

在所述第二比对结果指示所述预设选项存在所述被选中选项的情况下，将所述被选中选项以预设样式在所述悬浮框中显示。

3.根据权利要求2所述的基于element-UI的筛选框的交互方法，其特征在于，在检测到所述筛选框的模式是单选模式的情况下，所述响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框之后，所述方法还包括：

在所述分页栏中添加阻止冒泡事件；

响应于针对分页栏的第三选中操作，基于所述阻止冒泡事件，继续显示所述悬浮框。

4.根据权利要求1所述的基于element-UI的筛选框的交互方法，其特征在于，在检测到所述筛选框的模式是多选模式的情况下，所述响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框之后，所述方法还包括：

在所述选择区和所述分页栏中都添加阻止冒泡事件；

响应于针对所述选择区的第四选中操作和所述分页栏的第三选中操作，基于所述阻止冒泡事件，继续显示所述悬浮框；

响应于针对指定区域的第五选中操作，关闭所述悬浮框；其中，所述指定区域是为除所述悬浮框区域外的区域。

5.根据权利要求1所述的基于element-UI的筛选框的交互方法，其特征在于，在检测到所述筛选框的模式是搜索模式的情况下，所述响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框之后，所述方法还包括：

响应于针对所述筛选框的搜索操作，获取所述搜索操作对应的搜索信息；

根据所述搜索信息从所有所述预设选项中筛选得到指定选项，并在所述悬浮框展示所述指定选项；其中，所述指定选项和所述搜索信息相匹配。

6.根据权利要求1所述的基于element-UI的筛选框的交互方法，其特征在于，所述分页栏还包括：分页跳转输入框、所述预设选项的总数和预设的单页中展示的预设选项的总数；所述响应于针对基于element-UI的筛选框的第一选中操作还包括：

获取所述预设的单页中展示的预设选项的总数；

根据所述预设的单页中展示的预设选项的总数将所述预设选项在所述悬浮框中进行展示。

7.根据权利要求1至6任一项所述的基于element-UI的筛选框的交互方法，其特征在于，所述预设样式包括第一预设样式和第二预设样式，所述第二预设样式包括第一颜色和第二颜色；所述将所述被选中选项以预设样式在所述悬浮框中显示包括：

以第一预设样式显示所述被选中选项；其中，所述第一预设样式包括高亮格式或加粗格式；和/或，

以所述第一颜色显示所述被选中选项，并以所述第二颜色显示所述预设选项中的未选中选项。

8.一种基于element-UI的筛选框的交互装置，其特征在于，所述装置包括显示模块、选中模块、比对模块和结果模块：

所述显示模块，用于响应于针对基于element-UI的筛选框的第一选中操作，显示悬浮框，所述悬浮框中展示选择区和分页栏，所述选择区展示至少两个预设选项，所述分页栏列出分页号，所述分页号包括默认分页号；

所述选中模块，用于响应于针对所述默认分页号对应的第一预设选项的第二选中操作，将与所述第二选中操作对应的选项作为被选中选项，并在所述筛选框中显示所述被选中选项；

所述比对模块，用于响应于针对所述分页号的切换操作，将所述被选中选项与经过所述切换操作后的当前分页号对应的第二预设选项进行对比，得到第一比对结果；

所述结果模块，用于在所述第一比对结果指示所述第二预设选项存在所述被选中选项的情况下，将所述被选中选项以预设样式在所述悬浮框中显示。

9.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。

Images