CN114816184A - 一种操作控件的展示方法、装置、设备及存储介质 - Google Patents

Abstract

本发明公开了一种操作控件的展示方法、装置、设备及存储介质，包括：响应于目标页面展示请求，根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件；如果第一操作控件的数量小于操作控件的总数量，则在操作区域中对各第一操作控件以及动态调整控件进行展示，将动态调整控件的活动状态设置为展开状态；响应于动态调整控件的触发请求，对操作区域进行拉伸，并将剩余的第二操作控件展示在操作区域中，然后将动态调整控件的活动状态设置为收起状态。本发明实施例的技术方案可以实现对操作控件进行自动展开或收起，提高页面的空间利用率以及操作控件展示方法的扩展性。

Description

一种操作控件的展示方法、装置、设备及存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种操作控件的展示方法、装置、设备及存储介质。

背景技术

页面操作控件是为网页访问者提供的一种对内容资源进行编辑展示的提示工具。在应用程序后台管理系统中，开发人员通常设计包括大量操作模块的应用页面。

在应用页面中，如果操作控件太多，会导致占用的页面空间较大，使得应用页面中真正展示内容资源的空间较小。为了避免页面空间造成浪费，现有的应用页面在开发过程中，通常都是由开发人员手动设置待展示的操作控件，并对剩余的操作控件进行隐藏。

但是，在应用页面的展示过程中，如果用户对应用页面的尺寸进行缩小，缩小后的应用页面无法对原始页面中的全部操作控件进行展示；如果用户对应用页面的尺寸进行放大，放大后的应用页面只会对原始页面中的操作控件进行展示，由此导致页面中存在大面积的空白区域，造成页面空间浪费；最后，现有的应用页面需要开发人员在页面展示之前，对每个操作控件的属性进行配置，导致页面展示方法的扩展性较差。

发明内容

本发明提供了一种操作控件的展示方法、装置、设备及存储介质，可以实现对操作控件进行自动展开或收起，提高页面的空间利用率以及操作控件展示方法的扩展性。

根据本发明的一方面，提供了一种操作控件的展示方法，包括：

响应于目标页面展示请求，根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件；

如果第一操作控件的数量小于操作控件的总数量，则在操作区域中对各第一操作控件以及动态调整控件进行展示，并将所述动态调整控件的活动状态设置为展开状态；

响应于动态调整控件的触发请求，根据所述展开状态对操作区域进行拉伸，并将剩余的第二操作控件展示在所述操作区域中，然后将所述动态调整控件的活动状态设置为收起状态。

可选的，所述目标页面展示请求包括：目标页面开启请求以及目标页面缩放请求；

响应于目标页面展示请求，根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件，包括：

响应于目标页面开启请求或目标页面缩放请求，确定目标页面中操作区域的尺寸；

根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件。

可选的，在将所述动态调整控件的活动状态设置为收起状态之后，还包括：

响应于动态调整控件的触发请求，将各所述第二操作控件进行隐藏；

根据所述收起状态，对操作区域进行收缩，并将所述动态调整控件的活动状态设置为展开状态。

可选的，根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件，包括：

获取预先生成的操作控件集合，在所述操作控件集合中依次获取一个操作控件作为当前处理控件；

对当前处理控件的宽度值进行逐个累加，得到宽度累加值，并对所述宽度累加值与动态调整控件的宽度值进行求和；

判断求和结果是否大于操作区域的宽度值；

若是，则将排列次序位于当前处理控件之前的各操作控件作为第一操作控件；

若否，判断求和结果是否等于操作区域的宽度值；

若是，则将所述当前处理控件，以及排列次序位于当前处理控件之前的各操作控件作为第一操作控件；

若否，则判断当前处理控件是否为操作控件集合中的最后一个操作控件；

若是，则将操作控件集合中的全部操作控件作为第一操作控件；

若否，则返回执行在所述操作控件集合中依次获取一个操作控件作为当前处理控件的操作，直至求和结果大于或等于操作区域的宽度值，或者当前处理控件为操作控件集合中的最后一个操作控件为止。

可选的，如果第一操作控件的数量小于操作控件的总数量，则在操作区域中对各第一操作控件以及动态调整控件进行展示，包括：

如果第一操作控件的数量小于操作控件的总数量，则将各所述第二操作控件添加至页面开发框架的隐藏类目中，并在页面开发框架中将动态调整控件的展示属性设置为开启；

获取与页面开发框架对应的当前业务逻辑代码，通过运行所述当前业务逻辑代码，完成对第二操作控件的隐藏，并将各第一操作控件以及动态调整控件展示在操作区域中。

可选的，在根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件之后，还包括：

如果第一操作控件的数量等于操作控件的总数量，则在页面开发框架中将动态调整控件的展示属性设置为关闭；

获取与页面开发框架对应的当前业务逻辑代码，通过运行所述当前业务逻辑代码，完成将全部操作控件展示在操作区域中。

可选的，在将剩余的第二操作控件展示在所述操作区域中，然后将所述动态调整控件的活动状态设置为收起状态之后，还包括：

响应于对第一操作控件或第二操作控件的触发请求，获取与所述触发请求匹配的内容资源；

将所述内容资源展示在目标页面的内容区域中，并将各所述第二操作控件进行隐藏；

对所述操作区域进行收缩，然后将所述动态调整控件的活动状态设置为展开状态。

根据本发明的另一方面，提供了一种操作控件的展示装置，所述装置包括：

第一操作控件确定模块，用于响应于目标页面展示请求，根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件；

第一操作控件展示模块，用于如果第一操作控件的数量小于操作控件的总数量，则在操作区域中对各第一操作控件以及动态调整控件进行展示，并将所述动态调整控件的活动状态设置为展开状态；

第二操作控件展示模块，用于响应于动态调整控件的触发请求，根据所述展开状态对操作区域进行拉伸，并将剩余的第二操作控件展示在所述操作区域中，然后将所述动态调整控件的活动状态设置为收起状态。

根据本发明的另一方面，提供了一种电子设备，所述电子设备包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行本发明任一实施例所述的操作控件的展示方法。

根据本发明的另一方面，提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使处理器执行时实现本发明任一实施例所述的操作控件的展示方法。

根据本发明的另一方面，提供了一种计算机程序产品，所述计算机程序产品包括计算机程序，所述计算机程序在被处理器执行时实现本发明任一实施例所述的操作控件的展示方法。

本发明实施例提供的技术方案，通过响应于目标页面展示请求，根据目标页面中操作区域的尺寸以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件，如果第一操作控件的数量小于操作控件的总数量，则在操作区域中对各第一操作控件以及动态调整控件进行展示，并将动态调整控件的活动状态设置为展开状态，响应于动态调整控件的触发请求，对操作区域进行拉伸，并将剩余的第二操作控件展示在操作区域中，然后将动态调整控件的活动状态设置为收起状态的技术手段，可以实现对操作控件进行自动展开或收起，提高操作控件展示方法的扩展性；可以实现根据用户需求释放操作区域的空间，提高操作控件展示方法的灵活性；可以解决现有技术中应用页面进行缩放后，操作控件出现遗漏或者页面空间造成浪费的问题；可以在用户触发操作控件以后，无需用户触发动态调整控件，即可自动将部分操作控件进行收起；可以准确快速确定操作区域当前尺寸下能够展示的第一操作控件；可以解决现有技术中的硬编码问题，提高目标页面的渲染效率；提高操作区域的利用率，避免目标页面的展示空间造成浪费。

应当理解，本部分所描述的内容并非旨在标识本发明的实施例的关键或重要特征，也不用于限制本发明的范围。本发明的其它特征将通过以下的说明书而变得容易理解。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1a是根据本发明实施例提供的一种操作控件的展示方法的流程图；

图1b是根据本发明实施例提供的一种操作区域的示意图；

图1c是根据本发明实施例提供的另一种操作区域的示意图；

图2a是根据本发明实施例提供的另一种操作控件的展示方法的流程图；

图2b是根据本发明实施例提供的一种目标页面的示意图；

图3是根据本发明实施例提供的另一种操作控件的展示方法的流程图；

图4是根据本发明实施例提供的一种操作控件的展示装置的结构示意图；

图5是实现本发明实施例的操作控件的展示方法的电子设备的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

图1a为本发明实施例提供的一种操作控件的展示方法的流程图，本实施例可适用于在应用页面中展示操作控件的情况，该方法可以由操作控件的展示装置来执行，该操作控件的展示装置可以采用硬件和/或软件的形式实现，该操作控件的展示装置可配置于具备数据处理功能的电子设备(例如终端或者服务器)中。如图1a所示，该方法包括：

步骤110、响应于目标页面展示请求，根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件。

在本实施例中，所述目标页面可以为应用程序中的页面。可选的，当检测到用户触发了目标页面的展示按钮时，则确定用户触发了目标页面展示请求。由于目标页面的尺寸在不同的展示环境下会发生变化，因此，需要实时根据目标页面的尺寸，确定用于展示操作控件的区域(也即操作区域)尺寸。所述操作控件用于用户对目标页面进行编辑操作，例如搜索、新增以及查看等。

在一个具体的实施例中，操作区域的尺寸与目标页面的尺寸之间的比例通常是预设的固定值。因此，在检测到用户触发目标页面展示请求后，可以根据目标页面的当前尺寸，以及预设比例，确定操作区域的尺寸。

在此步骤中，可选的，可以根据操作区域的尺寸，计算操作区域的面积，根据预先生成的各操作控件的尺寸，计算各操作控件的面积，然后根据操作区域的面积以及各操作控件的面积，确定操作区域当前尺寸下能够展示的操作控件的最大数量，并按照所述数量在全部操作控件中选取多个操作控件(也即第一操作控件)。其中，所述第一操作控件可以理解为检测到目标页面展示请求后，操作区域在当前尺寸下能够展示的操作控件。

在一个具体的实施例中，可以按照所述数量，以及各操作控件的优先级，在全部操作控件中选取多个操作控件。假设预先一共生成了5个操作控件，优先级由高到底依次为操作控件A、操作控件B、操作控件C、操作控件D以及操作控件E，如果操作区域中最多能够展示3个操作控件，则可以将操作控件A、操作控件B以及操作控件C作为第一操作控件。

步骤120、如果第一操作控件的数量小于操作控件的总数量，则在操作区域中对各第一操作控件以及动态调整控件进行展示，并将所述动态调整控件的活动状态设置为展开状态。

在一个具体的实施例中，确定第一操作控件后，如果第一操作控件的数量等于操作控件的总数量，也即操作区域的尺寸支持对全部操作控件进行展示时，则可以将全部操作控件展示在操作区域中。

在另一个具体的实施例中，如果第一操作控件的数量小于操作控件的总数量，也即操作区域的尺寸不支持对全部操作控件进行展示时，则可以先将各第一操作控件展示在操作区域中，然后将动态调整控件一并展示在所述操作区域中。所述动态调整控件，用于用户对目标页面对应的操作控件进行动态展示。

在操作区域的尺寸不支持对全部操作控件进行展示的情况下，可以将动态调整控件的活动状态设置为展开状态，以便于用户触发所述动态调整控件后，将目标页面对应的全部操作控件中，除了第一操作控件以外的剩余操作控件(也即第二操作控件)进行展示。

步骤130、响应于动态调整控件的触发请求，根据所述展开状态对操作区域进行拉伸，并将剩余的第二操作控件展示在所述操作区域中，然后将所述动态调整控件的活动状态设置为收起状态。

在本实施例中，在将动态调整控件的活动状态设置为展开状态以后，如果检测到用户对动态调整控件进行触发，则可以根据剩余的第二操作控件的尺寸，确定操作区域的拉伸尺寸，并根据所述拉伸尺寸对操作区域进行拉伸，然后将剩余的第二操作控件展示在所述操作区域中，并将动态调整控件的活动状态设置为收起状态，以便于用户触发所述动态调整控件后，将各第二操作控件进行隐藏。

在本实施例中，动态调整控件的活动状态，用于表示动态调整控件在当前时刻下对应的功能属性。所述活动状态可以包括展开状态和收起状态。

在一个具体的实施例中，假设目标页面一共对应7个操作控件，分别为搜索控件1、搜索控件2、搜索控件3、搜索控件4、搜索控件5、搜索控件6以及新增控件。检测到用户触发目标页面的展示请求后，确定的第一操作控件假设为搜索控件1、搜索控件2和新增控件，则可以将这三个第一操作控件以及动态调整控件展示在操作区域中，如图1b所示。其中，动态调整控件的活动状态设置为展开状态后，对应的控件名称也可设为“展开”。

检测到用户对上述动态调整控件进行触发后，可以对操作区域进行拉伸，并将剩余的第二操作控件(也即搜索控件3、搜索控件4、搜索控件5和搜索控件6)展示在操作区域中，最后将动态调整控件的活动状态设置为收起状态。其中，动态调整控件的活动状态设置为收起状态后，对应的控件名称也可设为“收起”，如图1c所示。

在本实施例中，通过实时根据目标页面中操作区域的尺寸，确定操作区域中待展示的多个第一操作控件，并且当第一操作控件的数量小于操作控件的总数量时，对各第一操作控件以及动态调整控件进行展示，然后将动态调整控件的活动状态设置为展开状态，响应于动态调整控件的触发请求，对操作区域进行拉伸，并将剩余的第二操作控件展示在操作区域的技术手段，可以实现在目标页面尺寸较小的情况下，对页面中的全部操作控件进行展示，满足用户丰富的操作需求；在目标页面尺寸较大的情况下，可以自动将全部操作控件展示在操作区域，由此可以避免页面空间浪费，提高页面空间利用率。此外，相比于现有技术中开发人员在页面展示之前，对每个操作控件进行手动配置而言，本实施例可以实现操作控件动态展示过程的自动化，提高操作控件展示方法的扩展性。

在上述实施例的基础上，在将剩余的第二操作控件展示在所述操作区域中，然后将所述动态调整控件的活动状态设置为收起状态之后，还包括：响应于动态调整控件的触发请求，将各所述第二操作控件进行隐藏；根据所述收起状态，对操作区域进行收缩，并将所述动态调整控件的活动状态设置为展开状态。

在本实施例中，将动态调整控件的活动状态设置为收起状态后，如果用户触发了动态调整控件，则可以将各第二操作控件进行隐藏，并根据各第一操作控件的尺寸，以及当前操作区域的尺寸，计算操作区域中空白区域的尺寸，然后按照所述空白区域的尺寸，对操作区域进行收缩。

这样设置的好处在于，可以实现根据用户需求释放操作区域的空间，提高操作控件展示方法的灵活性，以及用户对应用程序的使用体验。

图2a为本发明实施例提供的另一种操作控件的展示方法的流程图，如图2a所示，该方法包括：

步骤210、响应于目标页面展示请求，根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件。

在本发明实施例的一个实施方式中，所述目标页面展示请求包括：目标页面开启请求以及目标页面缩放请求。响应于目标页面展示请求，根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件，包括：响应于目标页面开启请求或目标页面缩放请求，确定目标页面中操作区域的尺寸；根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件。

在本实施例中，所述目标页面展示请求可以包括两种请求方式，第一种是用户在应用程序中开启目标页面的请求(也即目标页面开启请求)，第二种是在目标页面的展示过程中，用户对目标页面进行缩小或放大的请求(也即目标页面缩放请求)。

在检测到上述任一请求后，可以先根据目标页面的尺寸，确定操作区域的尺寸，然后根据操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件。

这样设置的好处在于，可以实时根据目标页面的尺寸，对操作区域中展示的操作控件进行动态调整，解决现有技术中应用页面进行缩放后，操作控件出现遗漏或者页面空间造成浪费的问题，由此可以提高用户对应用程序的使用体验。

步骤220、如果第一操作控件的数量小于操作控件的总数量，则在操作区域中对各第一操作控件以及动态调整控件进行展示，并将所述动态调整控件的活动状态设置为展开状态。

步骤230、响应于动态调整控件的触发请求，根据所述展开状态对操作区域进行拉伸，并将剩余的第二操作控件展示在所述操作区域中，然后将所述动态调整控件的活动状态设置为收起状态。

步骤240、响应于对第一操作控件或第二操作控件的触发请求，获取与所述触发请求匹配的内容资源。

在本实施例中，将第一操作控件和第二操作控件全部展示在操作区域以后，如果检测到用户触发了第一操作控件或第二操作控件，则可以根据对应控件匹配的功能指令，从预设的数据库中获取与触发请求匹配的内容资源。

在一个具体的实施例中，以图1c中的操作区域为例，假设用户触发了搜索控件5，则可以根据搜索控件5绑定的功能指令，从预设的数据库中获取与搜索控件5匹配的内容资源。

步骤250、将所述内容资源展示在目标页面的内容区域中，并将各所述第二操作控件进行隐藏。

在本实施例中，目标页面的内容区域可以为，应用程序向用户展示具体内容或资源的区域。

步骤260、对所述操作区域进行收缩，然后将所述动态调整控件的活动状态设置为展开状态。

在本实施例中，图2b为一种目标页面的示意图，目标页面可以包括操作区域201和内容区域202，通过步骤240获取到内容资源后，可以将所述内容资源展示在内容区域202中，并将各第二操作控件(以图1c中的第二操作控件为例)进行隐藏，然后根据第一操作控件的尺寸，以及当前操作区域的尺寸，计算操作区域中空白区域的尺寸，并按照所述空白区域的尺寸，对操作区域进行收缩，然后将动态调整控件的活动状态设置为展开状态，如图2b所示。

这样设置的好处在于，一方面可以在目标页面尺寸较小的情况下，自动将全部操作控件进行展开，提高用户对应用程序的使用体验；另一方面可以在用户触发操作控件以后，无需用户触发动态调整控件，即可自动将部分操作控件进行收起，由此可以扩大内容区域的尺寸，提高用户对目标页面的观看体验。

本发明实施例提供的技术方案，通过响应于目标页面展示请求，根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件，如果第一操作控件的数量小于操作控件的总数量，则在操作区域中对各第一操作控件以及动态调整控件进行展示，响应于动态调整控件的触发请求，对操作区域进行拉伸，并将剩余的第二操作控件展示在操作区域中，响应于对第一操作控件或第二操作控件的触发请求，获取匹配的内容资源并展示在内容区域中，然后将各第二操作控件进行隐藏，并对操作区域进行收缩的技术手段，可以实现对操作控件进行自动展开或收起，提高页面的空间利用率以及操作控件展示方法的扩展性。

图3为本发明实施例提供的另一种操作控件的展示方法的流程图，如图3所示，该方法包括：

步骤301、响应于目标页面展示请求，获取预先生成的操作控件集合，在所述操作控件集合中依次获取一个操作控件作为当前处理控件。

在本实施例中，操作控件集合中包括目标页面对应的多个操作控件。具体的，可以根据各操作控件的优先级，在操作控件集合中依次获取一个操作控件作为当前处理控件。

步骤302、对当前处理控件的宽度值进行逐个累加，得到宽度累加值，并对所述宽度累加值与动态调整控件的宽度值进行求和。

在此步骤中，可以对获取到的各操作控件的宽度值进行逐个累加，然后对宽度累加值与动态调整控件的预设宽度值进行求和。

步骤303、判断求和结果是否大于操作区域的宽度值，若是，执行步骤304，若否，执行步骤305。

在本实施例中，检测到目标页面展示请求后，可以根据目标页面的宽度值，确定操作区域的宽度值。

步骤304、将排列次序位于当前处理控件之前的各操作控件作为第一操作控件。

在本实施例中，如果求和结果大于操作区域的宽度值，则可以根据操作控件的获取顺序，将排列次序位于当前处理控件之前的各操作控件作为第一操作控件。

步骤305、判断求和结果是否等于操作区域的宽度值，若是，执行步骤306，若否，执行步骤307。

步骤306、将所述当前处理控件，以及排列次序位于当前处理控件之前的各操作控件作为第一操作控件。

在此步骤中，如果求和结果等于操作区域的宽度值，则可以确定当前处理控件是操作区域当前尺寸下，能够展示的最后一个操作控件。因此，可以将当前处理控件，以及排列次序位于当前处理控件之前的各操作控件作为第一操作控件。

步骤307、判断当前处理控件是否为操作控件集合中的最后一个操作控件，若是，执行步骤308，若否，返回执行步骤301，直至求和结果大于或等于操作区域的宽度值，或者当前处理控件为操作控件集合中的最后一个操作控件为止。

在本实施例中，如果求和结果小于操作区域的宽度值，则判断当前处理控件是否为操作控件集合中的最后一个操作控件。如果不是，则继续返回执行在操作控件集合中依次获取一个操作控件作为当前处理控件的操作，直至求和结果大于或等于操作区域的宽度值，或者当前处理控件为操作控件集合中的最后一个操作控件为止。

步骤308、将操作控件集合中的全部操作控件作为第一操作控件。

在本实施例中，如果求和结果小于操作区域的宽度值，并且当前处理控件为操作控件集合中的最后一个操作控件，则可以确定操作区域在当前尺寸下，可以对全部操作控件进行展示。因此，可以将操作控件集合中的全部操作控件作为第一操作控件。

这样设置的好处在于，通过对操作控件集合进行遍历，根据各操作控件的宽度值、动态调整控件的宽度值以及操作区域的宽度值，可以准确快速确定操作区域当前尺寸下能够展示的第一操作控件，由此可以提高目标页面的响应速率。

步骤309、判断第一操作控件的数量小于操作控件的总数量，若是，执行步骤310，若否，执行步骤313。

步骤310、将各第二操作控件添加至预设页面开发框架的隐藏类目中，并在所述页面开发框架中将动态调整控件的展示属性设置为开启。

在本实施例中，所述页面开发框架可以是Vue，或者其他支持控件配置的页面开发框架。目标页面可以基于所述页面开发框架进行开发。其中，Vue是一套用于构建用户界面的渐进式JavaScript框架。

如果第一操作控件的数量小于操作控件的总数量，则可以将目标页面对应的全部操作控件中，除第一操作控件以外的剩余第二操作控件添加至页面开发框架的隐藏类目中，并在页面开发框架中将动态调整控件的展示属性设置为开启，以使动态调整控件展示在操作区域中。

步骤311、获取与所述页面开发框架对应的当前业务逻辑代码，通过运行所述当前业务逻辑代码，完成对第二操作控件的隐藏，以及将各第一操作控件以及动态调整控件展示在操作区域中，然后将所述动态调整控件的活动状态设置为展开状态。

步骤312、响应于动态调整控件的触发请求，根据所述展开状态对操作区域进行拉伸，并将剩余的第二操作控件展示在所述操作区域中，然后将所述动态调整控件的活动状态设置为收起状态。

在此步骤中，如果检测到用户对动态调整控件的触发请求，则可以在页面开发框架中将包含第二操作控件的隐藏类目进行删除，通过运行页面开发框架对应的当前业务逻辑代码，可以将剩余的第二操作控件展示在所述操作区域中。

这样设置的好处在于，通过在页面开发框架中对操作控件和动态调整控件的属性进行配置，可以解决现有技术中的硬编码问题，提高目标页面的渲染效率，提高用户对应用程序的使用体验。

步骤313、在所述页面开发框架中将动态调整控件的展示属性设置为关闭。

在本实施例中，如果第一操作控件的数量等于操作控件的总数量，则可以在页面开发框架中将动态调整控件的展示属性设置为关闭，以使动态调整控件在操作区域中进行隐藏。

步骤314、获取与所述页面开发框架对应的当前业务逻辑代码，通过运行所述当前业务逻辑代码，完成将全部操作控件展示在操作区域中。

这样设置的好处在于，如果第一操作控件的数量等于操作控件的总数量，通过将动态调整控件在操作区域中进行隐藏，可以提高操作区域的利用率，避免目标页面的展示空间造成浪费。

本发明实施例提供的技术方案，通过响应于目标页面展示请求，依次获取一个操作控件作为当前处理控件，对当前处理控件的宽度值进行逐个累加，对宽度累加值与动态调整控件的宽度值进行求和，判断求和结果是否大于操作区域的宽度值，若是，则将排列次序位于当前处理控件之前的各操作控件作为第一操作控件，若否，则判断求和结果是否等于操作区域的宽度值，若是，则将当前处理控件以及排列次序位于当前处理控件之前的各操作控件作为第一操作控件，若否，则判断当前处理控件是否为操作控件集合中的最后一个操作控件，若是，则将全部操作控件作为第一操作控件，如果第一操作控件的数量小于操作控件的总数量，则将各第二操作控件添加至页面开发框架的隐藏类目中，并将动态调整控件的展示属性设置为开启，获取并运行与页面开发框架对应的当前业务逻辑代码，然后将动态调整控件的活动状态设置为展开状态，响应于动态调整控件的触发请求，对操作区域进行拉伸，并将剩余的第二操作控件展示在操作区域中，然后将动态调整控件的活动状态设置为收起状态；如果第一操作控件的数量等于操作控件的总数量，则在页面开发框架中将动态调整控件的展示属性设置为关闭，获取并运行与页面开发框架对应的当前业务逻辑代码的技术手段，可以实现对操作控件进行自动展开或收起，提高页面的空间利用率以及操作控件展示方法的扩展性。

为了更好的对本发明实施例提供的技术方案进行介绍，本发明实施例可以参考下述的实施方式：

步骤1：在本地项目开发环境中使用开发服务器Vue-Cli构建本地项目，并在本地项目中安装Element-UI组件库，然后在项目开发代码中引用所述组件库；

步骤2：自定义定义控件扩展指令SearchExpand，所述指令中包括以下操作：

步骤21、在SearchExpand指令的inserted钩子函数参数中获取当前指令绑定的文档对象模型(Document Object Model，DOM)中的动态调整控件元素el，预先生成的各操作控件vnode，定义指令所作用的上下文context；

步骤22、获取操作区域的宽度值width1，获取各操作控件的宽度值width2，定义动态调整控件的宽度值width3；

步骤23、遍历操作控件集合，逐个累加每个操作控件的宽度值，当宽度累加值与width3的和大于width1时，将剩余的操作控件添加至Vue中hiddenItem的class类中；同时记录此时遍历的操作控件的个数num，当num小于操作控件集合的长度，则在context中设置动态调整控件的展示属性showExpandBtn设为true；

步骤24、定义监听函数$onClick，通过所述监听函数获取context中动态调整控件的活动状态showExpandBtnIcon，当活动状态为展开状态时，showExpandBtnIcon设置为up；当活动状态为收起状态时，showExpandBtnIcon设置为down。如果showExpandBtnIcon为up，当用户触发动态调整控件时，则将hiddenItem的class类进行移除；如果showExpandBtnIcon为down，并且width4大于width1时，将剩余的操作控件添加至Vue中hiddenItem的class类中；

步骤25、在监测到动态调整控件的展示属性showExpandBtn为false时，在SearchExpand指令的unbind钩子函数中，移除监听函数$onClick。

步骤3：在Vue中添加目标页面对应的业务逻辑代码，所述业务逻辑代码涉及各操作控件、动态调整控件以及操作区域等；

步骤4：将各操作控件以及动态调整控件的高度设为统一高度值；

步骤5：在前端界面设计引擎Element的form外层对应的dom中使用上述指令SearchExpand；

步骤6：在目标页面的data属性中定义showExpandBtn和showExpandBtnIcon变量，初始值分别为false和down；

步骤7：在目标页面的method属性中，添加函数showExpandBtnFunc，点击该函数实现showExpandBtnIcon在up和down之间的切换；

步骤8：在动态调整控件中绑定showExpandBtnFunc函数；

步骤9：在动态调整控件中添加v-if语句，使得所述语句通过变量showExpandBtn，控制动态调整控件的展示或隐藏。

本发明实施例提供的方法可以实现对操作控件进行自动展开或收起，提高页面的空间利用率以及操作控件展示方法的扩展性。

图4为本发明实施例提供的一种操作控件的展示装置的结构示意图，如图4所示，该装置包括：第一操作控件确定模块410、第一操作控件展示模块420和第二操作控件展示模块430。

其中，第一操作控件确定模块410，用于响应于目标页面展示请求，根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件；

第一操作控件展示模块420，用于如果第一操作控件的数量小于操作控件的总数量，则在操作区域中对各第一操作控件以及动态调整控件进行展示，并将所述动态调整控件的活动状态设置为展开状态；

第二操作控件展示模块430，用于响应于动态调整控件的触发请求，根据所述展开状态对操作区域进行拉伸，并将剩余的第二操作控件展示在所述操作区域中，然后将所述动态调整控件的活动状态设置为收起状态。

本发明实施例提供的技术方案，通过响应于目标页面展示请求，根据目标页面中操作区域的尺寸以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件，如果第一操作控件的数量小于操作控件的总数量，则在操作区域中对各第一操作控件以及动态调整控件进行展示，并将动态调整控件的活动状态设置为展开状态，响应于动态调整控件的触发请求，根据展开状态对操作区域进行拉伸，并将剩余的第二操作控件展示在操作区域中，然后将动态调整控件的活动状态设置为收起状态的技术手段，可以实现对操作控件进行自动展开或收起，提高页面的空间利用率以及操作控件展示方法的扩展性。

在上述实施例的基础上，所述目标页面展示请求包括：目标页面开启请求以及目标页面缩放请求；

所述第一操作控件确定模块410包括：

尺寸确定单元，用于响应于目标页面开启请求或目标页面缩放请求，确定目标页面中操作区域的尺寸；

控件确定单元，用于根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件；

控件集合获取单元，用于获取预先生成的操作控件集合，在所述操作控件集合中依次获取一个操作控件作为当前处理控件；

宽度累加单元，用于对当前处理控件的宽度值进行逐个累加，得到宽度累加值，并对所述宽度累加值与动态调整控件的宽度值进行求和；

求和判断单元，用于判断求和结果是否大于操作区域的宽度值；

控件处理单元，用于求和结果大于操作区域的宽度值时，将排列次序位于当前处理控件之前的各操作控件作为第一操作控件；

宽度值判断单元，用于判断求和结果是否等于操作区域的宽度值；

当前控件处理单元，用于求和结果等于操作区域的宽度值时，将所述当前处理控件，以及排列次序位于当前处理控件之前的各操作控件作为第一操作控件；

控件判断单元，用于判断当前处理控件是否为操作控件集合中的最后一个操作控件；

全部控件处理单元，用于当前处理控件是否为操作控件集合中的最后一个操作控件，并且求和结果小于操作区域的宽度值时，将操作控件集合中的全部操作控件作为第一操作控件；

展示属性设置单元，用于如果第一操作控件的数量等于操作控件的总数量，则在页面开发框架中将动态调整控件的展示属性设置为关闭；

全部控件展示单元，用于获取与页面开发框架对应的当前业务逻辑代码，通过运行所述当前业务逻辑代码，完成将全部操作控件展示在操作区域中。

第一操作控件展示模块420包括：

控件添加单元，用于如果第一操作控件的数量小于操作控件的总数量，则将各所述第二操作控件添加至页面开发框架页面开发框架的隐藏类目中，并在页面开发框架中将动态调整控件的展示属性设置为开启；

控件隐藏单元，用于获取与页面开发框架对应的当前业务逻辑代码，通过运行所述当前业务逻辑代码，完成对第二操作控件的隐藏，并将各第一操作控件以及动态调整控件展示在操作区域中。

第二操作控件展示模块430包括：

控件隐藏单元，用于响应于动态调整控件的触发请求，将各所述第二操作控件进行隐藏；

区域收缩单元，用于根据所述收起状态，对操作区域进行收缩，并将所述动态调整控件的活动状态设置为展开状态；

内容资源获取单元，用于响应于对第一操作控件或第二操作控件的触发请求，获取与所述触发请求匹配的内容资源；

内容资源展示单元，用于将所述内容资源展示在目标页面的内容区域中，并将各所述第二操作控件进行隐藏；

活动状态设置单元，用于对所述操作区域进行收缩，然后将所述动态调整控件的活动状态设置为展开状态。

上述装置可执行本发明前述所有实施例所提供的方法，具备执行上述方法相应的功能模块和有益效果。未在本发明实施例中详尽描述的技术细节，可参见本发明前述所有实施例所提供的方法。

图5示出了可以用来实施本发明的实施例的电子设备10的结构示意图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备(如头盔、眼镜、手表等)和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本发明的实现。

如图5所示，电子设备10包括至少一个处理器11，以及与至少一个处理器11通信连接的存储器，如只读存储器(ROM)12、随机访问存储器(RAM)13等，其中，存储器存储有可被至少一个处理器执行的计算机程序，处理器11可以根据存储在只读存储器(ROM)12中的计算机程序或者从存储单元18加载到随机访问存储器(RAM)13中的计算机程序，来执行各种适当的动作和处理。在RAM 13中，还可存储电子设备10操作所需的各种程序和数据。处理器11、ROM 12以及RAM 13通过总线14彼此相连。输入/输出(I/O)接口15也连接至总线14。

电子设备10中的多个部件连接至I/O接口15，包括：输入单元16，例如键盘、鼠标等；输出单元17，例如各种类型的显示器、扬声器等；存储单元18，例如磁盘、光盘等；以及通信单元19，例如网卡、调制解调器、无线通信收发机等。通信单元19允许电子设备10通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

处理器11可以是各种具有处理和计算能力的通用和/或专用处理组件。处理器11的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的处理器、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。处理器11执行上文所描述的各个方法和处理，例如操作控件的展示方法。

在一些实施例中，操作控件的展示方法可被实现为计算机程序，其被有形地包含于计算机可读存储介质，例如存储单元18。在一些实施例中，计算机程序的部分或者全部可以经由ROM 12和/或通信单元19而被载入和/或安装到电子设备10上。当计算机程序加载到RAM 13并由处理器11执行时，可以执行上文描述的操作控件的展示方法的一个或多个步骤。备选地，在其他实施例中，处理器11可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行操作控件的展示方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本发明的方法的计算机程序可以采用一个或多个编程语言的任何组合来编写。这些计算机程序可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器，使得计算机程序当由处理器执行时使流程图和/或框图中所规定的功能/操作被实施。计算机程序可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本发明的上下文中，计算机可读存储介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的计算机程序。计算机可读存储介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。备选地，计算机可读存储介质可以是机器可读信号介质。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在电子设备上实施此处描述的系统和技术，该电子设备具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给电子设备。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)、区块链网络和互联网。

计算系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品，以解决了传统物理主机与VPS服务中，存在的管理难度大，业务扩展性弱的缺陷。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发明中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本发明的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (10)

1.一种操作控件的展示方法，其特征在于，包括：

响应于目标页面展示请求，根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件；

如果第一操作控件的数量小于操作控件的总数量，则在操作区域中对各第一操作控件以及动态调整控件进行展示，并将所述动态调整控件的活动状态设置为展开状态；

响应于动态调整控件的触发请求，根据所述展开状态对操作区域进行拉伸，并将剩余的第二操作控件展示在所述操作区域中，然后将所述动态调整控件的活动状态设置为收起状态。

2.根据权利要求1所述的方法，其特征在于，所述目标页面展示请求包括：目标页面开启请求以及目标页面缩放请求；

响应于目标页面展示请求，根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件，包括：

响应于目标页面开启请求或目标页面缩放请求，确定目标页面中操作区域的尺寸；

根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件。

3.根据权利要求1所述的方法，其特征在于，在将所述动态调整控件的活动状态设置为收起状态之后，还包括：

响应于动态调整控件的触发请求，将各所述第二操作控件进行隐藏；

根据所述收起状态，对操作区域进行收缩，并将所述动态调整控件的活动状态设置为展开状态。

4.根据权利要求1所述的方法，其特征在于，根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件，包括：

获取预先生成的操作控件集合，在所述操作控件集合中依次获取一个操作控件作为当前处理控件；

对当前处理控件的宽度值进行逐个累加，得到宽度累加值，对所述宽度累加值与动态调整控件的宽度值进行求和，并将所述求和结果与操作区域的宽度值进行比较；

如果确定求和结果大于操作区域的宽度值，则将排列次序位于当前处理控件之前的各操作控件作为第一操作控件；

如果确定求和结果等于操作区域的宽度值，则将所述当前处理控件，以及排列次序位于当前处理控件之前的各操作控件作为第一操作控件；

如果确定求和结果小于操作区域的宽度值，并且当前处理控件为操作控件集合中的最后一个操作控件时，则将操作控件集合中的全部操作控件作为第一操作控件；

如果确定求和结果小于操作区域的宽度值，并且当前处理控件不为操作控件集合中的最后一个操作控件时，则返回执行在所述操作控件集合中依次获取一个操作控件作为当前处理控件的操作，直至求和结果大于或等于操作区域的宽度值，或者当前处理控件为操作控件集合中的最后一个操作控件为止。

5.根据权利要求1所述的方法，其特征在于，如果第一操作控件的数量小于操作控件的总数量，则在操作区域中对各第一操作控件以及动态调整控件进行展示，包括：

如果第一操作控件的数量小于操作控件的总数量，则将各所述第二操作控件添加至预设页面开发框架的隐藏类目中，并在所述页面开发框架中将动态调整控件的展示属性设置为开启；

获取与所述页面开发框架对应的当前业务逻辑代码，通过运行所述当前业务逻辑代码，完成对第二操作控件的隐藏，并将各第一操作控件以及动态调整控件展示在操作区域中。

6.根据权利要求5所述的方法，其特征在于，在根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件之后，还包括：

如果第一操作控件的数量等于操作控件的总数量，则在所述页面开发框架中将动态调整控件的展示属性设置为关闭；

获取与所述页面开发框架对应的当前业务逻辑代码，通过运行所述当前业务逻辑代码，完成将全部操作控件展示在操作区域中。

7.根据权利要求1所述的方法，其特征在于，在将剩余的第二操作控件展示在所述操作区域中，然后将所述动态调整控件的活动状态设置为收起状态之后，还包括：

响应于对第一操作控件或第二操作控件的触发请求，获取与所述触发请求匹配的内容资源；

将所述内容资源展示在目标页面的内容区域中，并将各所述第二操作控件进行隐藏；

对所述操作区域进行收缩，然后将所述动态调整控件的活动状态设置为展开状态。

8.一种操作控件的展示装置，其特征在于，包括：

第一操作控件确定模块，用于响应于目标页面展示请求，根据目标页面中操作区域的尺寸，以及各操作控件的尺寸，确定操作区域中待展示的多个第一操作控件；

第一操作控件展示模块，用于如果第一操作控件的数量小于操作控件的总数量，则在操作区域中对各第一操作控件以及动态调整控件进行展示，并将所述动态调整控件的活动状态设置为展开状态；

第二操作控件展示模块，用于响应于动态调整控件的触发请求，根据所述展开状态对操作区域进行拉伸，并将剩余的第二操作控件展示在所述操作区域中，然后将所述动态调整控件的活动状态设置为收起状态。

9.一种电子设备，其特征在于，所述电子设备包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-7中任一项所述的操作控件的展示方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使处理器执行时实现权利要求1-7中任一项所述的操作控件的展示方法。

Images