弹窗组件的显示方法、装置以及电子终端制造方法及图纸

本申请提供了一种弹窗组件的显示方法、装置以及电子终端，涉及数据处理技术领域，缓解了在多种不同的场景中使用弹窗组件的过程缺乏灵活性的技术问题。该方法包括：如果指定事件发生，通过应用程序接口API调用终端操作系统中挂载的封装后的工具函数，所述工具函数用于表示通过渲染函数渲染所述弹窗组件；利用所述工具函数生成所述弹窗组件的虚拟节点VNode；基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示。

【技术实现步骤摘要】
弹窗组件的显示方法、装置以及电子终端
本申请涉及数据处理
，尤其是涉及一种弹窗组件的显示方法、装置以及电子终端。
技术介绍
弹窗指在打开网页、软件、手机应用程序(Application，APP)等的时候，图形用户界面自动弹出的窗口。弹窗组件是对弹窗的数据和方法的简单封装，通常用来实现各类选择器，例如确认弹窗、详情内容查看等功能，还可以通过弹窗组件实现一种进入网页游戏的快捷途径。目前，在对弹窗组件的前期编程过程中，需要在单文件组件中以固定模板的形式编写弹窗组件，继而在后期使用弹窗组件时只能基于该模板的方式调用弹窗组件，导致在多种不同的场景中使用弹窗组件的过程缺乏灵活性。
技术实现思路
本专利技术的目的在于提供一种弹窗组件的显示方法、装置以及电子终端，以缓解在多种不同的场景中使用弹窗组件的过程缺乏灵活性的技术问题。第一方面，本申请实施例提供了一种弹窗组件的显示方法，通过执行软件应用并在终端的显示器上渲染得到图形用户界面，所述终端的操作系统中挂载有封装后的工具函数，所述工具函数用于表示通过渲染函数渲染所述弹窗组件；所述方法包括：如果指定事件发生，通过应用程序接口(ApplicationProgrammingInterface，API)调用所述工具函数；利用所述工具函数生成所述弹窗组件的虚拟节点(VirtualDOMnode，简称VNode)；基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示。在一个可能的实现中，所述工具函数包括resolve子函数；在基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示的步骤之后，所述方法包括：响应于针对所述弹窗组件的确认操作，通过Promise的方式调用所述resolve子函数，在所述图形用户界面中显示第一预设子弹窗组件。在一个可能的实现中，所述工具函数包括reject子函数；在基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示的步骤之后，所述方法包括：响应于针对所述弹窗组件的取消操作，通过Promise的方式调用所述reject子函数，在所述图形用户界面中显示第二预设子弹窗组件。在一个可能的实现中，所述弹窗组件包括确认控件；针对所述弹窗组件的确认操作为针对所述确认控件的确定操作。在一个可能的实现中，所述弹窗组件包括取消控件；针对所述弹窗组件的取消操作为针对所述取消控件的确定操作。在一个可能的实现中，所述工具函数包括子组建渲染函数；利用所述工具函数生成所述弹窗组件的虚拟节点VNode的步骤，包括：利用所述子组建渲染函数确定createElement参数；基于所述createElement参数生成所述弹窗组件的虚拟节点VNode。在一个可能的实现中，所述工具函数包含弹窗属性参数dialogProps，所述dialogProps用于表示所述弹窗组件的标题、尺寸、位置中的至少一种。在一个可能的实现中，在基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示的步骤之后，所述方法包括：响应于针对所述弹窗组件的关闭操作，清除所述弹窗组件的资源。在一个可能的实现中，所述弹窗组件的资源包括：所述弹窗组件的虚拟节点VNode和/或桌面端组件库中所述弹窗组件的数据。在一个可能的实现中，封装后的所述工具函数挂载于所述操作系统中网页的body元素的DIV容器中。在一个可能的实现中，所述图形用户界面包含所述网页的画面；基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示的步骤，包括：基于所述弹窗组件的虚拟节点VNode，在所述网页的画面中对所述弹窗组件进行显示。在一个可能的实现中，所述工具函数还包括钩子函数，所述钩子函数用于执行在所述图形用户界面中对所述弹窗组件进行显示的步骤。第二方面，提供了一种弹窗组件的显示装置，通过执行软件应用并在终端的显示器上渲染得到图形用户界面，所述终端的操作系统中挂载有封装后的工具函数，所述工具函数用于表示通过渲染函数渲染所述弹窗组件；所述装置包括：调用模块，用于如果指定事件发生，通过应用程序接口API调用所述工具函数；生成模块，用于利用所述工具函数生成所述弹窗组件的虚拟节点VNode；显示模块，用于基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示。第三方面，本申请实施例又提供了一种电子终端，包括存储器、处理器，所述存储器中存储有可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述的第一方面所述方法。第四方面，本申请实施例又提供了一种计算机可读存储介质，所述计算机可读存储介质存储有机器可运行指令，所述计算机可运行指令在被处理器调用和运行时，所述计算机可运行指令促使所述处理器运行上述的第一方面所述方法。本申请实施例带来了以下有益效果：本申请实施例提供的一种弹窗组件的显示方法、装置以及电子终端，由于终端的操作系统中挂载有能够通过渲染函数渲染弹窗组件的工具函数，在指定事件发生时便能够直接通过API来调用该工具函数，并利用该工具函数生成弹窗组件的虚拟节点VNode，以在图形用户界面中显示出弹窗组件，因此，无需再以单文件组件中模板的方式调用弹窗组件，提高了弹窗组件的使用灵活性。为使本申请的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。附图说明为了更清楚地说明本申请具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1为本申请实施例提供的弹窗组件的显示方法的流程示意图；图2为本申请实施例提供的一种图形用户界面的示意图；图3为本申请实施例提供的一种弹窗组件的显示装置的结构示意图；图4为示出了本申请实施例所提供的一种电子终端的结构示意图。具体实施方式为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合附图对本申请的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。本申请实施例中所提到的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括其他没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。目前，Vue(一套用于构建用户界面的渐进式Ja本文档来自技高网...

【技术保护点】
1.一种弹窗组件的显示方法，其特征在于，通过执行软件应用并在终端的显示器上渲染得到图形用户界面，所述终端的操作系统中挂载有封装后的工具函数，所述工具函数用于表示通过渲染函数渲染所述弹窗组件；所述方法包括：/n如果指定事件发生，通过应用程序接口API调用所述工具函数；/n利用所述工具函数生成所述弹窗组件的虚拟节点VNode；/n基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示。/n

【技术特征摘要】
1.一种弹窗组件的显示方法，其特征在于，通过执行软件应用并在终端的显示器上渲染得到图形用户界面，所述终端的操作系统中挂载有封装后的工具函数，所述工具函数用于表示通过渲染函数渲染所述弹窗组件；所述方法包括：
如果指定事件发生，通过应用程序接口API调用所述工具函数；
利用所述工具函数生成所述弹窗组件的虚拟节点VNode；
基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示。


2.根据权利要求1所述的方法，其特征在于，所述工具函数包括resolve子函数；在基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示的步骤之后，所述方法包括：
响应于针对所述弹窗组件的确认操作，通过Promise的方式调用所述resolve子函数，在所述图形用户界面中显示第一预设子弹窗组件。


3.根据权利要求1所述的方法，其特征在于，所述工具函数包括reject子函数；在基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示的步骤之后，所述方法包括：
响应于针对所述弹窗组件的取消操作，通过Promise的方式调用所述reject子函数，在所述图形用户界面中显示第二预设子弹窗组件。


4.根据权利要求2所述的方法，其特征在于，所述弹窗组件包括确认控件；针对所述弹窗组件的确认操作为针对所述确认控件的确定操作。


5.根据权利要求3所述的方法，其特征在于，所述弹窗组件包括取消控件；针对所述弹窗组件的取消操作为针对所述取消控件的确定操作。


6.根据权利要求1所述的方法，其特征在于，所述工具函数包括子组建渲染函数；利用所述工具函数生成所述弹窗组件的虚拟节点VNode的步骤，包括：
利用所述子组建渲染函数确定createElement参数；
基于所述createElement参数生成所述弹窗组件的虚拟节点VNode。


7.根据权利要求1所述的方法，其特征在于，所述工具函数包含弹窗属性参数dialogProps，所述dialogProps用于表示所述弹窗组件的标题、尺寸、位置中的至少一种...

【专利技术属性】
技术研发人员：曾桂荣，
申请(专利权)人：网易杭州网络有限公司，
类型：发明
国别省市：浙江;33