CN111381920B - 弹窗组件的显示方法、装置以及电子终端 - Google Patents

Abstract

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

Description

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

技术领域

本申请涉及数据处理技术领域，尤其是涉及一种弹窗组件的显示方法、装置以及电子终端。

背景技术

弹窗指在打开网页、软件、手机应用程序(Application，APP)等的时候，图形用户界面自动弹出的窗口。

弹窗组件是对弹窗的数据和方法的简单封装，通常用来实现各类选择器，例如确认弹窗、详情内容查看等功能，还可以通过弹窗组件实现一种进入网页游戏的快捷途径。

目前，在对弹窗组件的前期编程过程中，需要在单文件组件中以固定模板的形式编写弹窗组件，继而在后期使用弹窗组件时只能基于该模板的方式调用弹窗组件，导致在多种不同的场景中使用弹窗组件的过程缺乏灵活性。

发明内容

本发明的目的在于提供一种弹窗组件的显示方法、装置以及电子终端，以缓解在多种不同的场景中使用弹窗组件的过程缺乏灵活性的技术问题。

第一方面，本申请实施例提供了一种弹窗组件的显示方法，通过执行软件应用并在终端的显示器上渲染得到图形用户界面，所述终端的操作系统中挂载有封装后的工具函数，所述工具函数用于表示通过渲染函数渲染所述弹窗组件；所述方法包括：

如果指定事件发生，通过应用程序接口(Application Programming Interface，API)调用所述工具函数；

利用所述工具函数生成所述弹窗组件的虚拟节点(Virtual DOM node，简称VNode)；

基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示。

在一个可能的实现中，所述工具函数包括resolve子函数；在基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示的步骤之后，所述方法包括：

响应于针对所述弹窗组件的确认操作，通过Promise的方式调用所述resolve子函数，在所述图形用户界面中显示第一预设子弹窗组件。

在一个可能的实现中，所述工具函数包括reject子函数；在基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示的步骤之后，所述方法包括：

响应于针对所述弹窗组件的取消操作，通过Promise的方式调用所述reject子函数，在所述图形用户界面中显示第二预设子弹窗组件。

在一个可能的实现中，所述弹窗组件包括确认控件；针对所述弹窗组件的确认操作为针对所述确认控件的确定操作。

在一个可能的实现中，所述弹窗组件包括取消控件；针对所述弹窗组件的取消操作为针对所述取消控件的确定操作。

在一个可能的实现中，所述工具函数包括子组建渲染函数；利用所述工具函数生成所述弹窗组件的虚拟节点VNode的步骤，包括：

利用所述子组建渲染函数确定create Element参数；

基于所述create Element参数生成所述弹窗组件的虚拟节点VNode。

在一个可能的实现中，所述工具函数包含弹窗属性参数dialog Props，所述dialog Props用于表示所述弹窗组件的标题、尺寸、位置中的至少一种。

在一个可能的实现中，在基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示的步骤之后，所述方法包括：

响应于针对所述弹窗组件的关闭操作，清除所述弹窗组件的资源。

在一个可能的实现中，所述弹窗组件的资源包括：所述弹窗组件的虚拟节点VNode和/或桌面端组件库中所述弹窗组件的数据。

在一个可能的实现中，封装后的所述工具函数挂载于所述操作系统中网页的body元素的DIV容器中。

在一个可能的实现中，所述图形用户界面包含所述网页的画面；基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示的步骤，包括：

基于所述弹窗组件的虚拟节点VNode，在所述网页的画面中对所述弹窗组件进行显示。

在一个可能的实现中，所述工具函数还包括钩子函数，所述钩子函数用于执行在所述图形用户界面中对所述弹窗组件进行显示的步骤。

第二方面，提供了一种弹窗组件的显示装置，通过执行软件应用并在终端的显示器上渲染得到图形用户界面，所述终端的操作系统中挂载有封装后的工具函数，所述工具函数用于表示通过渲染函数渲染所述弹窗组件；所述装置包括：

调用模块，用于如果指定事件发生，通过应用程序接口API调用所述工具函数；

生成模块，用于利用所述工具函数生成所述弹窗组件的虚拟节点VNode；

显示模块，用于基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示。

第三方面，本申请实施例又提供了一种电子终端，包括存储器、处理器，所述存储器中存储有可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述的第一方面所述方法。

第四方面，本申请实施例又提供了一种计算机可读存储介质，所述计算机可读存储介质存储有机器可运行指令，所述计算机可运行指令在被处理器调用和运行时，所述计算机可运行指令促使所述处理器运行上述的第一方面所述方法。

本申请实施例带来了以下有益效果：

本申请实施例提供的一种弹窗组件的显示方法、装置以及电子终端，由于终端的操作系统中挂载有能够通过渲染函数渲染弹窗组件的工具函数，在指定事件发生时便能够直接通过API来调用该工具函数，并利用该工具函数生成弹窗组件的虚拟节点VNode，以在图形用户界面中显示出弹窗组件，因此，无需再以单文件组件中模板的方式调用弹窗组件，提高了弹窗组件的使用灵活性。

为使本申请的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

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

图1为本申请实施例提供的弹窗组件的显示方法的流程示意图；

图2为本申请实施例提供的一种图形用户界面的示意图；

图3为本申请实施例提供的一种弹窗组件的显示装置的结构示意图；

图4为示出了本申请实施例所提供的一种电子终端的结构示意图。

具体实施方式

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

本申请实施例中所提到的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括其他没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。

目前，Vue(一套用于构建用户界面的渐进式JavaScript框架)是目前前端领域最热门一套用于构建用户界面的渐进式Model-View-ViewModel(简称MVVM)框架之一，其提供了使用单文件组件的方式编写可复用Web组件的方法，配合现代化打包工具，如Web pack(代码编译工具)，能够高效编写兼容IE9及以上浏览器的复杂单页应用。MVVM框架的核心在于数据驱动、组件化、可复用。而Element-UI是一套基于Vue的优秀的桌面组件库，封装了日常使用的表单、按钮、弹窗、菜单、导航、各类选择器等前端开发常用的组件，使用起来也是非常方便，使得开发者可以专注于业务逻辑，提高开发效率。在Element-UI中，弹窗(Dialog)组件是日常开发中使用频率较高的组件之一，通常用来实现各类选择器，确认弹窗、详情内容查看等功能。

而有些系统业务逻辑或者用户界面(User Interface，UI)交互要求十分复杂，这就对组件的易用性、可扩展性、可定制化程度甚至可“Hack(对代码进行增加、删除、修改、优化等)”性要求非常高。

目前，Element-UI只提供了基于模板的方式编写和调用Dialog，即只能够在Vue单文件组件中以模板形式编写弹窗组件的功能。具体的，需要在Vue单文件组件模板中编写<el-dialog>标签，并在data中使用一个dialog Visible变量来控制弹窗的显示与否。如果开发者需要设置多个不同的弹窗，只能在模板中编写多个<el-dialog>标签，并使用多个变量控制其状态。而且，开发者无法在普通JavaScript(js)中调用弹窗或者控制某个弹窗的行为，所有这些逻辑必须写在单文件组件中。这便导致了如下多方面的问题：

首先是会导致出现大量样板代码，所谓“样板代码”，是指任何看似重复的代码一次又一次的出现，但又具有稍微不同的逻辑或作用，而且无法去除或优化这些代码。例如，可以表现为会出现多个<el-dialog>标签，标签上使用同样的方式绑定了事件、属性、控制变量等，而且在数据(data)和方法(method)中，分散出现了多个类似的用于控制弹窗状态的变量、处理事件的函数，本来这些逻辑应该是相关的，却被分散在代码的不同地方，不易管理，不利于复用。

而且，无法在普通js文件中或随时全局地调用弹窗组件。若要调用弹窗，必须编写Vue组件，而Vue组件是需要经过预编译才能使用的，但有时候，并不具备这个条件。例如，某些系统是参杂了jQuery技术栈和Vue技术栈的混合应用，其代码有一部分是基于jQuery的、没有已经过Webpack编译的传统js文件。在这些js文件中，终端无法使用全局的API来调用一个Element-UI的弹窗。有时候即使是在Vue单文件组件中，开发者编写<el-dialog>模板也会造成较大的资源浪费，因为有时只是在某些条件下需要简单的弹出一些文字提示，稍后就会自动关闭，而在此情况下，创建一个<el-dialog>标签无疑会造成较大的人力资源浪费，而且，需要附件一堆变量和事件处理函数，无法做到随时调用。

再者，控制回调逻辑不方便。例如，在一个页面中，可能会连续出现多个弹窗，第一个弹窗关闭之后，终端会紧接着弹出下一个弹窗，以此类推。而且，每一个弹窗，有确认和取消两个按钮，用户点了这两个按钮后，后续弹出的弹窗会不一样。这时候终端只能监听类似dialog Visible的变量，或者通过弹窗事件在回调函数中改变跟其它弹窗绑定的变量，从而达到控制下一个弹窗的目的。同样，这些逻辑也是分散在代码的不同地方中，一方面产生代码冗余，另一方面，不利于编写高内聚组件，代码逻辑之间跳跃较大，相关联的逻辑无法紧密放在一起，不利于后续维护。

基于此，本申请实施例提供了一种弹窗组件的显示方法、装置以及电子终端，通过该方法可以缓解在多种不同的场景中使用弹窗组件的过程缺乏灵活性的技术问题。

下面结合附图对本发明实施例进行进一步地介绍。

图1为本申请实施例提供的一种弹窗组件的显示方法的流程示意图。其中，该方法应用于可呈现图形用户界面的终端，通过执行软件应用并在终端的显示器上渲染得到图形用户界面，该终端的操作系统中挂载有封装后的工具函数，工具函数用于表示通过渲染函数渲染弹窗组件。如图1所示，该方法包括：

步骤S110，如果指定事件发生，通过应用程序接口API调用工具函数。

其中，指定事件指能够触发弹窗组件显示的事件。例如，当用户点击浏览器关闭控件，即针对该浏览器发生关闭操作时，终端可以自动弹出弹窗组件，便于用户确认是否真正关闭该浏览器，而其中针对浏览器的关闭操作即为指定事件。

需要说明的是，API指应用程序(即软件应用)与终端的操作系统之间的接口，通过这个接口使应用程序能够在执行中访问操作系统中的资源以及取得操作系统的服务。也可以理解为，API接口是应用程序取得操作系统服务的途径。

步骤S120，利用工具函数生成弹窗组件的虚拟节点VNode。

本步骤中的工具函数即为步骤S110中调用到的工具函数。需要说明的是，组件(Component)是对数据和方法的简单封装，例如，一个组件是一个特定对象，组件可以有该特定对象自身的属性和方法。其中，属性是组件数据的简单访问者，方法则是组件的一些简单而可见的功能。使用组件可以实现拖放式编程、快速的属性处理以及真正的面向表单、按钮、弹窗、菜单等对象的设计。

需要说明的是，VNode指的是虚拟的文档对象模型(Document Object Model，简称DOM)节点。其中，DOM是处理可扩展置标语言的标准编程接口，其可以动态的访问程序和脚本，更新其内容、结构和www文档的风格。其中的文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个标签内的文本项，DOM树结构能够精确描述文档中标签间的相互关联性。而VNode表示了虚拟的DOM节点，能够利用普通的编程语言对象来描述真实的DOM，以将DOM标签、属性、内容都变成该编程语言对象的属性。例如，使用JavaScript的编程语言对象来对一种物体进行说明。

本申请实施例中，终端通过调用出的工具函数，能够将弹窗组件的DOM描述成VNode，通过VNode(即虚拟DOM)能够对真实的弹窗组件DOM发生的变化保持追踪，便于显示出该弹窗组件。

步骤S130，基于弹窗组件的虚拟节点VNode，在图形用户界面中对弹窗组件进行显示。

本步骤中，终端可以根据步骤S120中生成的虚拟节点中描述的内容，如需要渲染怎样的节点及其子节点，来对弹窗组件进渲染，以在图形用户界面中显示出该弹窗组件。

通过提供可以利用渲染函数渲染弹窗组件的工具函数并将封装后的该工具函数挂在于终端的操作系统中，使终端能够更加方便的通过API接口来调用该工具函数，并能够利用该工具函数动态实时的渲染该弹窗组件，无需再以单文件组件中模板的刻板方式调用弹窗组件，使弹窗组件的使用过程更加灵活。

再者，在针对弹窗组件的编程过程中，开发者无需再使用单文件组件中模板的模式编写，终端能够直接使用渲染(render)函数来渲染弹窗组件。由于模板的模式需要依赖于打包工具进行预编译且无法导出为普通函数，而使用渲染函数可以在运行时更加直接、便捷的渲染动态内容，无需再进行预编译的过程，可以直接在普通函数中使用，以实现一个能够在全局中使用的工具函数。

通过将封装好的该工具函数挂到终端的操作系统下，在普通的编程语言(如JavaScript)的操作系统中也可调用，而且不需要再进行预编译的过程。例如，工具函数能够接受一个简单的JavaScript对象作为配置参数，用于方便的控制弹窗组件的类型、内容、交互特性等，能够在普通的JavaScript编程语言中或全局中随时调用该弹窗组件。因此，该工具函数可以挂载到全局，在运行时可以在任何地方随时调用该工具函数，无需再依赖预编译环境以及Vue单文件组件，使弹窗组件的使用过程更加灵活。

而且，在依赖预编译环境以及Vue单文件组件的情况下，能够消除样板代码和冗余代码，只在需要的地方出现相关的逻辑，无需再事先编写模板，无需定义一堆变量来控制弹窗状态。从而使弹窗的创建过程也得到了简化，省去了很多胶水代码，语义也更加简洁清晰，有效减少了代码量，提高了开发效率。同时在运行时也节省了增加变量等额外需要的性能开销，提高了性能。

下面对上述步骤进行详细介绍。

在一些实施例中，可以通过Promise来实现函数的调用过程。作为一个示例，工具函数包括resolve子函数；在步骤S130之后，该方法还可以包括以下步骤：

步骤a)，响应于针对弹窗组件的确认操作，通过Promise的方式调用resolve子函数，在图形用户界面中显示第一预设子弹窗组件。

通过以Promise的方式调用resolve子函数，实现以Promise的方式控制回调函数，可以将异步操作以同步操作的流程表达出来，能够方便控制回调逻辑，可进行链式调用，避免了层层嵌套的回调函数，消除了回调地狱。此外，Promise对象提供了统一的接口，使得控制异步操作更加容易。

基于上述步骤a)，弹窗组件包括确认控件；针对弹窗组件的确认操作为针对确认控件的确定操作。

示例性的，如图2所示，在图形用户界面中，显示出了“确认”控件，终端能够响应于针对于该“确认”控件的确定操作，通过Promise的方式调用resolve子函数。通过确认控件，对于用户而言，能够使针对弹窗组件的确认操作过程更加便捷易于操作。

作为另一个示例，工具函数包括reject子函数；在步骤S130之后，该方法还可以包括以下步骤：

步骤b)，响应于针对弹窗组件的取消操作，通过Promise的方式调用reject子函数，在图形用户界面中显示第二预设子弹窗组件。

通过以Promise的方式调用resolve子函数，实现以Promise的方式控制回调函数，可以将异步操作以同步操作的流程表达出来，能够方便控制回调逻辑，可进行链式调用，避免了层层嵌套的回调函数，消除了回调地狱。此外，Promise对象提供了统一的接口，使得控制异步操作更加容易。

基于上述步骤b)，弹窗组件包括取消控件；针对弹窗组件的取消操作为针对取消控件的确定操作。

例如，如图2所示，在图形用户界面中，显示出了“取消”控件，终端能够响应于针对于该“取消”控件的确定操作，通过Promise的方式调用reject子函数。通过取消控件，对于用户而言，能够使针对弹窗组件的取消操作过程更加便捷易于操作。

基于上述步骤a)和步骤b)，示例性的，可以使用create Dialog Based Component函数创建两个弹窗dialog1和dialog2。其中，dialog2是在响应于针对dialog1的确认操作(即Promise被resolved)后才出现，接下来，如果针对dialog2的是取消操作(即Promise被rejected)，则会出现提示如“dialog2 cancelled”(dialog2取消、撤销、终止、废除等)。

当然，也可以理解为Create Dialog Based Component函数在创建弹窗的同时，返回一个Promise对象的实例，在该实例中，封装了点击事件的处理以及Promise相关逻辑。当该弹窗的“确定”按钮被点击后，该Promise状态变为resolved，如果点了“取消”按钮，则变为rejecte。这种模式通常用来控制异步逻辑。例如，开发者可以设定在用户点了“确定”和“取消”按钮后，分别执行不同的操作。具体的，可以在该Promise的then方法中放入resolved后的逻辑，catch方法中放入rejected后的逻辑，而且可以链式调用。

通过以Promise的方式控制回调函数，能够方便控制回调逻辑，可进行链式调用，而且消除了回调地狱。同时，在then或者catch回调中可以再次调用全局弹窗函数，来产生下一个弹窗，可以简便、连续的调用多个弹窗，而且弹窗相关的逻辑都集中在一起，有利于代码的阅读和维护。

在一些实施例中，可以利用create Element参数来生成弹窗组件的虚拟节点VNode。作为一个示例，工具函数包括子组建渲染函数；上述步骤S120可以包括如下步骤：

步骤c)，利用子组建渲染函数确定create Element参数；

步骤d)，基于create Element参数生成弹窗组件的虚拟节点VNode。

其中，子组建渲染函数children Renderer可以用于生成弹窗内部的内容，在执行时children Renderer可以被传入一个参数，即create Element函数，也就是Vue内部用于生成VNode的函数，children Renderer函数的逻辑由调用方实现，children Renderer函数的返回值是一个VNode对象。

通过create Element参数，可以准确的返回虚拟节点VNode，便于终端根据该VNode进行弹窗组件的渲染，使渲染出的弹窗组件得位置、内容等更加精确。

在一些实施例中，可以通过工具函数中的弹窗属性参数设置弹窗组件的多方面属性。作为一个示例，工具函数包含弹窗属性参数dialog Props，dialog Props用于表示弹窗组件的标题、尺寸、位置中的至少一种。

工具函数可以接收属性参数，即弹窗属性，可以表示桌面端组件库Element-UI中弹窗组件的属性配置对象，用于设定弹窗的标题、大小、位置等。

通过工具函数中的弹窗属性参数来设置弹窗组件的多方面属性，可以使弹窗组件按照设置的标题、大小、位置等进行更加准确、有效的显示。

在一些实施例中，终端可以在弹窗组件关闭后清除弹窗组件的资源。作为一个示例，在步骤S130之后，该方法还可以包括以下步骤：

步骤e)，响应于针对弹窗组件的关闭操作，清除弹窗组件的资源。

在弹窗完全关闭后，终端可以自动卸载弹窗组件，清除弹窗组件相关的DOM节点。示例性的，可以使用Vue.observable定义一个响应式的属性对象，并且加入visible属性，用于控制弹窗状态，当改变属性对象中的属性时，弹窗的相关属性将会被自动更新。具体的，可以定义渲染数据render Data，将属性对象作为属性传入，另外使用on属性设置事件监听器，update：visible指弹窗可见性发生变化时，更新状态，通常发生在用户手动关闭弹窗的时候。closed事件发生在弹窗完全关闭后，关闭动画也播放完毕后，清理相关DOM资源。例如，如图2所示，当用户点击图形用户界面中弹窗组件右上角的叉号时，终端确定关闭弹窗组件，并清除弹窗组件的相关资源。

通过在弹窗组件关闭后清除弹窗组件的资源，能够减少已经使用过且不会再出现的组件数据等，节省操作系统的储存空间。

基于上述步骤e)，弹窗组件的资源包括：弹窗组件的虚拟节点VNode和/或桌面端组件库中弹窗组件的数据。

弹窗组件的资源也可以为桌面端组件库Element-UI库中的弹窗组件数据。在实际应用中，工具函数中对于弹窗组件类的定义，可以从桌面端组件库Element-UI库中直接导出。在关闭弹窗组件后，也可以直接删除桌面端组件库Element-UI库中的弹窗组件。

通过在弹窗组件关闭后清除弹窗组件的虚拟节点VNode、桌面端组件库中弹窗组件的数据，能够清理已经使用过的组件数据，节省操作系统的储存空间。

在一些实施例中，操作系统中网页的body元素的DIV容器中可以挂载上述封装后的工具函数。作为一个示例，封装后的工具函数挂载于操作系统中网页的body元素的DIV容器中。

在实际应用中，工具函数可以使用new Vue创建一个新的Vue实例，开发者可以在body元素下创建一空的个DIV容器，将该Vue实例挂载到该DIV容器下。

通过在操作系统中网页的body元素的DIV容器中挂载上述封装后的工具函数挂载，能够在网页的运行中随时调用弹窗组件，使网页的更加快速、有效的运行。

基于此，图形用户界面包含网页的画面；上述步骤S130可以包括如下步骤：

步骤f)，基于弹窗组件的虚拟节点VNode，在网页的画面中对弹窗组件进行显示。

通过挂载于操作系统中网页的body元素的DIV容器中的工具函数，使终端能够动态实时的渲染弹窗组件到网页视图中，便于更加快速、有效的运行网页。

在一些实施例中，上述工具函数可以利用钩子函数实现弹窗组件的显示过程。作为一个示例，工具函数还包括钩子函数，钩子函数用于执行在图形用户界面中对弹窗组件进行显示的步骤。

执行Vue的手动挂载方法后，弹窗元素会插入到DOM中，且钩子函数可以执行弹窗组件的显示过程。通过钩子函数能够方便调用者获取弹窗组件的实例对象，并进行再次的操作，例如调用方法，绑定事件等。

图3提供了一种弹窗组件的显示装置的结构示意图。该装置可以应用于终端，通过执行软件应用并在终端的显示器上渲染得到图形用户界面，终端的操作系统中挂载有封装后的工具函数，工具函数用于表示通过渲染函数渲染弹窗组件。如图3所示，弹窗组件的显示装置300包括：

第一调用模块301，用于如果指定事件发生，通过应用程序接口API调用工具函数；

生成模块302，用于利用工具函数生成弹窗组件的虚拟节点VNode；

显示模块303，用于基于弹窗组件的虚拟节点VNode，在图形用户界面中对弹窗组件进行显示。

在一些实施例中，工具函数包括resolve子函数；该装置还包括：

第二调用模块，用于响应于针对弹窗组件的确认操作，通过Promise的方式调用resolve子函数，在图形用户界面中显示第一预设子弹窗组件。

在一些实施例中，工具函数包括reject子函数；该装置还包括：

第三调用模块，用于响应于针对弹窗组件的取消操作，通过Promise的方式调用reject子函数，在图形用户界面中显示第二预设子弹窗组件。

在一些实施例中，弹窗组件包括确认控件；针对弹窗组件的确认操作为针对确认控件的确定操作。

在一些实施例中，弹窗组件包括取消控件；针对弹窗组件的取消操作为针对取消控件的确定操作。

在一些实施例中，工具函数包括子组建渲染函数；生成模块302具体用于：

利用子组建渲染函数确定create Element参数；

基于create Element参数生成弹窗组件的虚拟节点VNode。

在一些实施例中，工具函数包含弹窗属性参数dialog Props，dialog Props用于表示弹窗组件的标题、尺寸、位置中的至少一种。

在一些实施例中，该装置还包括：

清除模块，用于响应于针对弹窗组件的关闭操作，清除弹窗组件的资源。

在一些实施例中，弹窗组件的资源包括：弹窗组件的虚拟节点VNode和/或桌面端组件库中弹窗组件的数据。

在一些实施例中，封装后的工具函数挂载于操作系统中网页的body元素的DIV容器中。

在一些实施例中，图形用户界面包含网页的画面；显示模块303具体用于：

基于弹窗组件的虚拟节点VNode，在网页的画面中对弹窗组件进行显示。

在一些实施例中，工具函数还包括钩子函数，钩子函数用于执行在图形用户界面中对弹窗组件进行显示的步骤。

本申请实施例提供的弹窗组件的显示装置，与上述实施例提供的弹窗组件的显示方法具有相同的技术特征，所以也能解决相同的技术问题，达到相同的技术效果。

如图4所示，本申请实施例提供的一种电子终端400，包括：处理器401、存储器402和总线，所述存储器402存储有所述处理器401可执行的机器可读指令，当电子设备运行时，所述处理器401与所述存储器402之间通过总线通信，所述处理器401执行所述机器可读指令，以执行如上述弹窗组件的显示方法的步骤。

具体地，上述存储器402和处理器401能够为通用的存储器和处理器，这里不做具体限定，当处理器401运行存储器402存储的计算机程序时，能够执行上述弹窗组件的显示方法。

其中，处理器401可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器401中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器401可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(DigitalSignal Processing，简称DSP)、专用集成电路(Application Specific IntegratedCircuit，简称ASIC)、现成可编程门阵列(Field-Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器402，处理器401读取存储器402中的信息，结合其硬件完成上述方法的步骤。

对应于上述弹窗组件的显示方法，本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有机器可运行指令，所述计算机可运行指令在被处理器调用和运行时，所述计算机可运行指令促使所述处理器运行上述弹窗组件的显示方法的步骤。

本申请实施例所提供的弹窗组件的显示装置可以为设备上的特定硬件或者安装于设备上的软件或固件等。本申请实施例所提供的装置，其实现原理及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，前述描述的系统、装置和单元的具体工作过程，均可以参考上述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的实施例中，应该理解到，所揭露装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

又例如，附图中的流程图和框图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请提供的实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述弹窗组件的显示方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，简称ROM)、随机存取存储器(Random Access Memory，简称RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释，此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

最后应说明的是：以上所述实施例，仅为本申请的具体实施方式，用以说明本申请的技术方案，而非对其限制，本申请的保护范围并不局限于此，尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本申请实施例技术方案的范围。都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以权利要求的保护范围为准。

Claims (14)

1.一种弹窗组件的显示方法，其特征在于，通过执行软件应用并在终端的显示器上渲染得到图形用户界面，所述终端的操作系统中挂载有封装后的工具函数，所述工具函数用于表示通过渲染函数渲染所述弹窗组件；所述方法包括：

如果指定事件发生，通过应用程序接口API调用所述工具函数；

利用所述工具函数生成所述弹窗组件的虚拟节点VNode；

基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示；

所述工具函数包括子组建渲染函数，其中，所述子组建渲染函数用于生成弹窗内部的内容；利用所述工具函数生成所述弹窗组件的虚拟节点VNode的步骤，包括：

利用所述子组建渲染函数确定create Element参数；

基于所述create Element参数生成所述弹窗组件的虚拟节点VNode。

2.根据权利要求1所述的方法，其特征在于，所述工具函数包括resolve子函数；在基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示的步骤之后，所述方法包括：

响应于针对所述弹窗组件的确认操作，通过Promise的方式调用所述resolve子函数，在所述图形用户界面中显示第一预设子弹窗组件。

3.根据权利要求1所述的方法，其特征在于，所述工具函数包括reject子函数；在基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示的步骤之后，所述方法包括：

响应于针对所述弹窗组件的取消操作，通过Promise的方式调用所述reject子函数，在所述图形用户界面中显示第二预设子弹窗组件。

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

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

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

7.根据权利要求1所述的方法，其特征在于，在基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示的步骤之后，所述方法包括：

响应于针对所述弹窗组件的关闭操作，清除所述弹窗组件的资源。

8.根据权利要求7所述的方法，其特征在于，所述弹窗组件的资源包括：所述弹窗组件的虚拟节点VNode和/或桌面端组件库中所述弹窗组件的数据。

9.根据权利要求1所述的方法，其特征在于，封装后的所述工具函数挂载于所述操作系统中网页的body元素的DIV容器中。

10.根据权利要求9所述的方法，其特征在于，所述图形用户界面包含所述网页的画面；基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示的步骤，包括：

基于所述弹窗组件的虚拟节点VNode，在所述网页的画面中对所述弹窗组件进行显示。

11.根据权利要求1所述的方法，其特征在于，所述工具函数还包括钩子函数，所述钩子函数用于执行在所述图形用户界面中对所述弹窗组件进行显示的步骤。

12.一种弹窗组件的显示装置，其特征在于，通过执行软件应用并在终端的显示器上渲染得到图形用户界面，所述终端的操作系统中挂载有封装后的工具函数，所述工具函数用于表示通过渲染函数渲染所述弹窗组件；所述装置包括：

调用模块，用于如果指定事件发生，通过应用程序接口API调用所述工具函数；

生成模块，用于利用所述工具函数生成所述弹窗组件的虚拟节点VNode；

显示模块，用于基于所述弹窗组件的虚拟节点VNode，在所述图形用户界面中对所述弹窗组件进行显示；

所述工具函数包括子组建渲染函数，其中，所述子组建渲染函数用于生成弹窗内部的内容；所述生成模块具体用于：

利用所述子组建渲染函数确定create Element参数；

基于所述create Element参数生成所述弹窗组件的虚拟节点VNode。

13.一种电子终端，包括存储器、处理器，所述存储器中存储有可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现上述权利要求1至11任一项所述的方法的步骤。

14.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有机器可运行指令，所述计算机可运行指令在被处理器调用和运行时，所述计算机可运行指令促使所述处理器运行所述权利要求1至11任一项所述的方法。

Images