CN114879952A - 基于低代码平台的弹窗控制方法及其相关设备 - Google Patents

Abstract

本申请实施例属于计算机技术领域，应用于智慧社区领域中，涉及一种基于低代码平台的弹窗控制方法及其相关设备，包括根据弹窗组件创建弹窗，在弹窗图层框中生成弹窗图层；将弹窗的弹窗名称和当前页面的页面名称关联存储至弹窗表中；当检测到用户点击任意页面时，基于弹窗表确定与被点击的页面的页面名称相关联的所有弹窗名称，作为关联弹窗名称，将关联弹窗名称对应的弹窗图层和弹窗分别作为关联弹窗图层和关联弹窗，将关联弹窗图层显示在弹窗图层框中；当识别到用户点击任意一个关联弹窗图层的编辑按钮时，显示关联弹窗，锁定剩余的关联弹窗图层和剩余的关联弹窗。其中，弹窗表可存储于区块链中。本申请实现可以分别编辑不同的弹窗。

Description

基于低代码平台的弹窗控制方法及其相关设备

技术领域

本申请涉及计算机技术领域，尤其涉及基于低代码平台的弹窗控制方法及其相关设备。

背景技术

低代码开发平台提供更高维和易用的可视化IDE。通过低代码平台，大多数情况下，开发者并不需要使用传统的手写代码方式进行编程，而是可以通过图形化拖拽、参数配置等更高效的方式完成开发工作。

但日常web应用中，常常会存在需要弹窗处理的情况。而目前低代码平台对弹窗的处理较少，且弹窗管理混乱。目前现有方案有以下几种，一种是直接通过代码编辑方式生成弹窗(灵雀)。一种是专门提供一个按钮配置弹窗(百度amis，github代码star8.7k)。还有一种方式是没有弹窗，通过新建页面方式。但这几种方式都不便于对弹窗进行管理。并且实际业务场景复杂时，可能会在一个页面同时存在多个弹窗行为。而目前没有相关实现方案。

发明内容

本申请实施例的目的在于提出一种基于低代码平台的弹窗控制方法及其相关设备，本申请实现可以分别编辑不同的弹窗。

为了解决上述技术问题，本申请实施例提供一种基于低代码平台的弹窗控制方法，采用了如下所述的技术方案：

一种基于低代码平台的弹窗控制方法，包括下述步骤：

确定用户在当前页面中拖动到预设工作面板的弹窗组件，根据所述弹窗组件创建对应的弹窗，并在预设的弹窗图层框中生成对应所述弹窗的弹窗图层；

将所述弹窗的弹窗名称和当前页面的页面名称关联存储至数据库的弹窗表中；

当检测到用户点击任意页面时，基于所述弹窗表确定与被点击的所述页面的页面名称相关联的所有弹窗名称，作为关联弹窗名称，将所述关联弹窗名称对应的所述弹窗图层和弹窗分别作为关联弹窗图层和关联弹窗，并将所述关联弹窗图层显示在所述弹窗图层框中；

当识别到用户点击任意一个所述关联弹窗图层的编辑按钮时，显示对应的所述关联弹窗图层的所述关联弹窗，并锁定剩余的所述关联弹窗图层和剩余的所述关联弹窗。

进一步的，在所述将所述关联弹窗图层显示在所述弹窗图层框中的步骤之后，还包括：

当检测到用户点击任意所述关联弹窗图层的可视按钮时，模糊所述工作面板的内容，显示对应的所述关联弹窗的内容。

进一步的，在所述锁定剩余的所述关联弹窗图层和剩余的所述关联弹窗的步骤之后，还包括：

识别用户对所述关联弹窗的内容是否有修改操作，若用户修改所述关联弹窗的内容，则获取修改后的内容并新建目标JSON，将所述修改后的内容存储至所述目标JSON中。

进一步的，所述根据所述弹窗组件创建对应的弹窗的步骤包括：

当检测到用户点击页面中的添加按钮时，获取预设的弹窗属性；

根据预设的弹窗组件和所述弹窗属性创建对应的弹窗。

进一步的，所述锁定剩余的所述关联弹窗的步骤包括：

基于所述关联弹窗名称和fixwindow函数，锁定除当前显示的所述关联弹窗以外的所有所述关联弹窗名称对应的关联弹窗和关联弹窗图层。

进一步的，所述将所述关联弹窗图层显示在所述弹窗图层框中的步骤之后，还包括：

当接收到弹窗删除指令时，删除前端页面中的所述关联弹窗和对应的所述关联弹窗图层，并删除所述数据库中存储的所述关联弹窗名称。

进一步的，所述显示对应的所述关联弹窗图层的所述关联弹窗的步骤包括：

获取预设的透明度值，通过opacity属性配置所述关联弹窗的透明度；

根据所述透明度显示对应的所述关联弹窗图层的所述关联弹窗。

为了解决上述技术问题，本申请实施例还提供一种基于低代码平台的弹窗控制装置，采用了如下所述的技术方案：

一种基于低代码平台的弹窗控制装置，包括：

确定模块，用于确定用户在当前页面中拖动到预设工作面板的弹窗组件，根据所述弹窗组件创建对应的弹窗，并在预设的弹窗图层框中生成对应所述弹窗的弹窗图层；

存储模块，用于将所述弹窗的弹窗名称和当前页面的页面名称关联存储至数据库的弹窗表中；

关联模块，用于当检测到用户点击任意页面时，基于所述弹窗表确定与被点击的所述页面的页面名称相关联的所有弹窗名称，作为关联弹窗名称，将所述关联弹窗名称对应的所述弹窗图层和弹窗分别作为关联弹窗图层和关联弹窗，并将所述关联弹窗图层显示在所述弹窗图层框中；

锁定模块，用于当识别到用户点击任意一个所述关联弹窗图层的编辑按钮时，显示对应的所述关联弹窗图层的所述关联弹窗，并锁定剩余的所述关联弹窗图层和剩余的所述关联弹窗。

为了解决上述技术问题，本申请实施例还提供一种计算机设备，采用了如下所述的技术方案：

一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现上述的基于低代码平台的弹窗控制方法的步骤。

为了解决上述技术问题，本申请实施例还提供一种计算机可读存储介质，采用了如下所述的技术方案：

一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现上述的基于低代码平台的弹窗控制方法的步骤。

与现有技术相比，本申请实施例主要有以下有益效果：

本申请根据用户拖动到工作面板中的弹窗组件创建对应的弹窗，并生成对应的弹窗图层，实现通过弹窗图层管理弹窗。当检测到用户点击任意页面时，基于页面名称确定出对应的关联弹窗名称，进而将关联弹窗名称对应的弹窗图层显示在弹窗图层框中。当用户点击任意一个关联弹窗图层的编辑按钮时，显示对应的关联弹窗，实现通过关联弹窗图层控制关联弹窗，并锁定剩余的关联弹窗图层和剩余的关联弹窗，实现可以分别编辑不同的关联弹窗，且各关联弹窗之间不会相互影响。

附图说明

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

图1是本申请可以应用于其中的示例性系统架构图；

图2是根据本申请的基于低代码平台的弹窗控制方法的一个实施例的流程图；

图3是根据本申请的基于低代码平台的弹窗控制装置的一个实施例的结构示意图；

图4是根据本申请的计算机设备的一个实施例的结构示意图。

附图标记：200、计算机设备；201、存储器；202、处理器；203、网络接口；300、基于低代码平台的弹窗控制装置；301、确定模块；302、存储模块；303、关联模块；304、锁定模块。

具体实施方式

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。

如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving Picture ExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving PictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器。

需要说明的是，本申请实施例所提供的基于低代码平台的弹窗控制方法一般由服务器/终端设备执行，相应地，基于低代码平台的弹窗控制装置一般设置于服务器/终端设备中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

继续参考图2，示出了根据本申请的基于低代码平台的弹窗控制方法的一个实施例的流程图。所述的基于低代码平台的弹窗控制方法，包括以下步骤：

S1：确定用户在当前页面中拖动到预设工作面板的弹窗组件，根据所述弹窗组件创建对应的弹窗，并在预设的弹窗图层框中生成对应所述弹窗的弹窗图层。

在本实施例中，一般低代码平台中拥有三个基础板块：组件模块、工作面板和属性配置。在低代码平台中，用户通过从左侧“组件模块”拖动组件到中间的“工作面板”模块，即可生成代码页面。并且可以在右侧的“属性配置”中配置组件内的字体样式、颜色等属性，替代代码开发。本申请是在普通低代码平台的基础上，增加弹窗图层。弹窗组件是对弹窗的数据和方法的简单封装，通常用来实现各类选择器，例如确认弹窗、详情内容查看等功能，还可以通过弹窗组件实现一种进入网页游戏的快捷途径。当识别到用户拖动弹窗组件到预设的工作面板时，通过所述弹窗组件创建对应的弹窗，并在预设的弹窗图层框中的生成对应所述弹窗的弹窗图层。当识别到用户拖动另一弹窗组件到工作面板时，通过该另一弹窗组件创建对应的另一弹窗，并在所述弹窗图层框中生成对应另一弹窗的另一弹窗图层。本申请的弹窗图层框(即弹窗列表)展示在工作面板的页面侧方。根据低代码页面生成弹窗内容的具体过程是：从数据库中读取每一个弹窗的JSON数据，通过对JSON数据解析生成对应的html代码，进而根据html代码生成对应的弹窗。

具体的，所述根据所述弹窗组件创建对应的弹窗的步骤包括：

当检测到用户点击页面中的添加按钮时，获取预设的弹窗属性；

根据预设的弹窗组件和所述弹窗属性创建对应的弹窗。

在本实施例中，用户点击页面的添加按钮时，前端代码创建一个弹窗，该弹窗包含弹窗属性，所述弹窗属性包括弹窗的唯一名称(ID)，优先级(z-index)和content(内容)。其中，z-index用于展示层级。配置弹窗的z-index属性，数值越大则可以覆盖数值小的。使用z-index属性，通过代码动态给每个弹窗添加z-index的数值，z-index的数值越大，则对应的弹窗可以覆盖的其他的弹窗越多。

S2：将所述弹窗的弹窗名称和当前页面的页面名称关联存储至数据库的弹窗表中。

在本实施例中，识别到用户点击保存按钮后，将所述弹窗的弹窗名称和当前页面的页面名称关联存储至数据库中预先创建的弹窗表中。用于后续根据页面名称确定对应相关联的弹窗名称。

S3：当检测到用户点击任意页面时，基于所述弹窗表确定与被点击的所述页面的页面名称相关联的所有弹窗名称，作为关联弹窗名称，将所述关联弹窗名称对应的所述弹窗图层和弹窗分别作为关联弹窗图层和关联弹窗，并将所述关联弹窗图层显示在所述弹窗图层框中。

在本实施例中，弹窗图层框中的列表数据来源：列表数据通过数据库中存储的弹窗表，获取当前页面名称对应的所有的弹窗名称，作为关联弹窗名称。进而，将关联弹窗图层显示在所述弹窗图层框中，便于用户对当前页面对应的关联弹窗的编辑等操作。

S4：当识别到用户点击任意一个所述关联弹窗图层的编辑按钮时，显示对应的所述关联弹窗图层的所述关联弹窗，并锁定剩余的所述关联弹窗图层和剩余的所述关联弹窗。

在本实施例中，用户编辑一个关联弹窗时，锁定剩余的关联弹窗和剩余的关联弹窗图层。在用户对关联弹窗的属性进行修改时，根据关联弹窗名称确定需要修改的关联弹窗，进而修改对应的属性。当用户点击另一个关联弹窗图层的编辑按钮时，解除该另一个关联弹窗图层对应的关联弹窗的锁定，使其成为可编辑的状态，同时显示该另一个关联弹窗图层的关联弹窗，并锁定剩余的关联弹窗图层和剩余的所述关联弹窗(即锁定除该另一个关联弹窗图层对应的关联弹窗以外的所有关联弹窗)。由于每个弹窗有自己独一无二的id。用户编辑时选中某个关联弹窗的时候，计算机会记录下正在修改的关联弹窗名称(即ID)，并根据该关联弹窗名称锁定除该关联弹窗名称以外的所有关联弹窗，所以关联弹窗之间的编辑互不影响。本申请实现多个关联弹窗并存在一个页面，且所有关联弹窗均可编辑。可以让低代码用户实现更复杂的业务场景。

具体的，所述锁定剩余的所述关联弹窗的步骤包括：

基于所述关联弹窗名称和fixwindow函数，锁定除当前显示的所述关联弹窗以外的所有所述关联弹窗名称对应的关联弹窗和关联弹窗图层。

在本实施例中，fixwindow函数用来根据除当前显示的所述关联弹窗以外的所有所述关联弹窗名称查询对应的关联弹窗，进而锁定这些关联弹窗。

此外，所述显示对应的所述关联弹窗图层的所述关联弹窗的步骤包括：

获取预设的透明度值，通过opacity属性配置所述关联弹窗的透明度；

根据所述透明度显示对应的所述关联弹窗图层的所述关联弹窗。

在本实施例中，接收的用户预设的透明度值。修改图层透明度：前端页面控制css中的opacity属性，通过用户设置透明度1％-100％，动态给每个弹窗添加对应opacity：0-1。opacity的意思是不透明性，opacity取值范围为0-1；opacity：0，表示完全透明，opacity：1，表示完全不透明。

在本实施例中，基于低代码平台的弹窗控制方法运行于其上的电子设备(例如图1所示的服务器/终端设备)可以通过有线连接方式或者无线连接方式接收用户设置的透明度值。需要指出的是，上述无线连接方式可以包括但不限于3G/4G连接、WiFi连接、蓝牙连接、WiMAX连接、Zigbee连接、UWB(ultra wideband)连接、以及其他现在已知或将来开发的无线连接方式。

在本实施例的一些可选的实现方式中，在步骤S3，即将所述关联弹窗图层显示在所述弹窗图层框中的步骤之后，上述电子设备还可以执行以下步骤：

当检测到用户点击任意所述关联弹窗图层的可视按钮时，模糊所述工作面板的内容，显示对应的所述关联弹窗的内容。

在本实施例中，当用户点击任意关联弹窗图层的可视按钮时，将工作面板作为背景，淡化模糊工作面板的内容，仅保留当前关联弹窗的内容。在用户对当前关联弹窗进行编辑拖拽等操作时，由于淡化模糊了工作面板的内容，在不影响作为背景页面的工作面板的内容的同时，使得当前的关联弹窗的内容更加突出。

在本实施例的一些可选的实现方式中，在步骤S4，即锁定剩余的所述关联弹窗图层和剩余的所述关联弹窗的步骤之后，上述电子设备还可以执行以下步骤：

识别用户对所述关联弹窗的内容是否有修改操作，若用户修改所述关联弹窗的内容，则获取修改后的内容并新建目标JSON，将所述修改后的内容存储至所述目标JSON中。

在本实施例中，弹窗中修改后的内容单独存储在目标JSON(即另一段JSON)中。避免修改后的内容与原始内容相混淆，造成数据错乱。

在本实施例的一些可选的实现方式中，在步骤S3，即将所述关联弹窗图层显示在所述弹窗图层框中的步骤之后，上述电子设备还可以执行以下步骤：

当接收到弹窗删除指令时，删除前端页面中的所述关联弹窗和对应的所述关联弹窗图层，并删除所述数据库中存储的所述关联弹窗名称。

在本实施例中，除了新建以外，用户还可以创建弹窗图层分组、删除弹窗、以及修改弹窗的透明度。分组包括：工作面板可以新增/修改/删除文件夹，形成文件夹路径，通过拖动把关联弹窗挪到对应文件夹内。数据库存储所述文件夹路径的信息，在工作面板编辑时统计所述文件夹路径的信息并汇总后展示到前端界面。删除关联弹窗：前端页面点击删除后，删除前端页面中的关联弹窗和对应的关联弹窗图层，并且前端页面通过接口向数据库发送删除通知，通知数据库删除对应关联弹窗名称。

本申请使得工作面板实现从二维向三维的拓展。实现对一个页面内同时拥有多个关联弹窗，每个关联弹窗均可编辑且互不影响。

需要强调的是，为进一步保证上述弹窗表的私密和安全性，上述弹窗表还可以存储于一区块链的节点中。

本申请所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

本申请可应用于智慧社区领域中，从而推动智慧城市的建设。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该计算机可读指令在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。

应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

进一步参考图3，作为对上述图2所示方法的实现，本申请提供了一种基于低代码平台的弹窗控制装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图3所示，本实施例所述的基于低代码平台的弹窗控制装置300包括：确定模块301、存储模块302、关联模块303以及锁定模块304。其中：确定模块301，用于确定用户在当前页面中拖动到预设工作面板的弹窗组件，根据所述弹窗组件创建对应的弹窗，并在预设的弹窗图层框中生成对应所述弹窗的弹窗图层；存储模块302，用于将所述弹窗的弹窗名称和当前页面的页面名称关联存储至数据库的弹窗表中；关联模块303，用于当检测到用户点击任意页面时，基于所述弹窗表确定与被点击的所述页面的页面名称相关联的所有弹窗名称，作为关联弹窗名称，将所述关联弹窗名称对应的所述弹窗图层和弹窗分别作为关联弹窗图层和关联弹窗，并将所述关联弹窗图层显示在所述弹窗图层框中；锁定模块304，用于当识别到用户点击任意一个所述关联弹窗图层的编辑按钮时，显示对应的所述关联弹窗图层的所述关联弹窗，并锁定剩余的所述关联弹窗图层和剩余的所述关联弹窗。

在本实施例中，本申请根据用户拖动到工作面板中的弹窗组件创建对应的弹窗，并生成对应的弹窗图层，实现通过弹窗图层管理弹窗。当检测到用户点击任意页面时，基于页面名称确定出对应的关联弹窗名称，进而将关联弹窗名称对应的弹窗图层显示在弹窗图层框中。当用户点击任意一个关联弹窗图层的编辑按钮时，显示对应的关联弹窗，实现通过关联弹窗图层控制关联弹窗，并锁定剩余的关联弹窗图层和剩余的关联弹窗，实现可以分别编辑不同的关联弹窗，且各关联弹窗之间不会相互影响。

所述确定模块301包括检测子模块和创建子模块，其中，所述检测子模块用于当检测到用户点击页面中的添加按钮时，获取预设的弹窗属性；所述创建子模块用于根据预设的弹窗组件和所述弹窗属性创建对应的弹窗。

在本实施例的一些可选的实现方式中，上述锁定模块304进一步用于：基于所述关联弹窗名称和fixwindow函数，锁定除当前显示的所述关联弹窗以外的所有所述关联弹窗名称对应的关联弹窗和关联弹窗图层。

所述锁定模块304包括获取子模块和显示子模块，其中，获取子模块用于获取预设的透明度值，通过opacity属性配置所述关联弹窗的透明度；显示子模块用于根据所述透明度显示对应的所述关联弹窗图层的所述关联弹窗。

在本实施例的一些可选的实现方式中，上述装置300还包括：模糊模块，用于当检测到用户点击任意所述关联弹窗图层的可视按钮时，模糊所述工作面板的内容，显示对应的所述关联弹窗的内容。

在本实施例的一些可选的实现方式中，上述装置300还包括：存储模块，用于识别用户对所述关联弹窗的内容是否有修改操作，若用户修改所述关联弹窗的内容，则获取修改后的内容并新建目标JSON，将所述修改后的内容存储至所述目标JSON中。

在本实施例的一些可选的实现方式中，上述装置300还包括：删除模块，

当接收到弹窗删除指令时，删除前端页面中的所述关联弹窗和对应的所述关联弹窗图层，并删除所述数据库中存储的所述关联弹窗名称。

本申请根据用户拖动到工作面板中的弹窗组件创建对应的弹窗，并生成对应的弹窗图层，实现通过弹窗图层管理弹窗。当检测到用户点击任意页面时，基于页面名称确定出对应的关联弹窗名称，进而将关联弹窗名称对应的弹窗图层显示在弹窗图层框中。当用户点击任意一个关联弹窗图层的编辑按钮时，显示对应的关联弹窗，实现通过关联弹窗图层控制关联弹窗，并锁定剩余的关联弹窗图层和剩余的关联弹窗，实现可以分别编辑不同的关联弹窗，且各关联弹窗之间不会相互影响。

为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图4，图4为本实施例计算机设备基本结构框图。

所述计算机设备200包括通过系统总线相互通信连接存储器201、处理器202、网络接口203。需要指出的是，图中仅示出了具有组件201-203的计算机设备200，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(Application Specific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable Gate Array，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。

所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。

所述存储器201至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器201可以是所述计算机设备200的内部存储单元，例如该计算机设备200的硬盘或内存。在另一些实施例中，所述存储器201也可以是所述计算机设备200的外部存储设备，例如该计算机设备200上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，所述存储器201还可以既包括所述计算机设备200的内部存储单元也包括其外部存储设备。本实施例中，所述存储器201通常用于存储安装于所述计算机设备200的操作系统和各类应用软件，例如基于低代码平台的弹窗控制方法的计算机可读指令等。此外，所述存储器201还可以用于暂时地存储已经输出或者将要输出的各类数据。

所述处理器202在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器202通常用于控制所述计算机设备200的总体操作。本实施例中，所述处理器202用于运行所述存储器201中存储的计算机可读指令或者处理数据，例如运行所述基于低代码平台的弹窗控制方法的计算机可读指令。

所述网络接口203可包括无线网络接口或有线网络接口，该网络接口203通常用于在所述计算机设备200与其他电子设备之间建立通信连接。

在本实施例中，实现通过关联弹窗图层控制关联弹窗，并锁定剩余的关联弹窗图层和剩余的关联弹窗，实现可以分别编辑不同的关联弹窗，且各关联弹窗之间不会相互影响。

本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述的基于低代码平台的弹窗控制方法的步骤。

在本实施例中，实现通过关联弹窗图层控制关联弹窗，并锁定剩余的关联弹窗图层和剩余的关联弹窗，实现可以分别编辑不同的关联弹窗，且各关联弹窗之间不会相互影响。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。

显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。

Claims (10)

1.一种基于低代码平台的弹窗控制方法，其特征在于，包括下述步骤：

确定用户在当前页面中拖动到预设工作面板的弹窗组件，根据所述弹窗组件创建对应的弹窗，并在预设的弹窗图层框中生成对应所述弹窗的弹窗图层；

将所述弹窗的弹窗名称和当前页面的页面名称关联存储至数据库的弹窗表中；

当检测到用户点击任意页面时，基于所述弹窗表确定与被点击的所述页面的页面名称相关联的所有弹窗名称，作为关联弹窗名称，将所述关联弹窗名称对应的所述弹窗图层和弹窗分别作为关联弹窗图层和关联弹窗，并将所述关联弹窗图层显示在所述弹窗图层框中；

当识别到用户点击任意一个所述关联弹窗图层的编辑按钮时，显示对应的所述关联弹窗图层的所述关联弹窗，并锁定剩余的所述关联弹窗图层和剩余的所述关联弹窗。

2.根据权利要求1所述的基于低代码平台的弹窗控制方法，其特征在于，在所述将所述关联弹窗图层显示在所述弹窗图层框中的步骤之后，还包括：

当检测到用户点击任意所述关联弹窗图层的可视按钮时，模糊所述工作面板的内容，显示对应的所述关联弹窗的内容。

3.根据权利要求1所述的基于低代码平台的弹窗控制方法，其特征在于，在所述锁定剩余的所述关联弹窗图层和剩余的所述关联弹窗的步骤之后，还包括：

识别用户对所述关联弹窗的内容是否有修改操作，若用户修改所述关联弹窗的内容，则获取修改后的内容并新建目标JSON，将所述修改后的内容存储至所述目标JSON中。

4.根据权利要求1所述的基于低代码平台的弹窗控制方法，其特征在于，所述根据所述弹窗组件创建对应的弹窗的步骤包括：

当检测到用户点击页面中的添加按钮时，获取预设的弹窗属性；

根据预设的弹窗组件和所述弹窗属性创建对应的弹窗。

5.根据权利要求1所述的基于低代码平台的弹窗控制方法，其特征在于，所述锁定剩余的所述关联弹窗的步骤包括：

基于所述关联弹窗名称和fixwindow函数，锁定除当前显示的所述关联弹窗以外的所有所述关联弹窗名称对应的关联弹窗和关联弹窗图层。

6.根据权利要求1所述的基于低代码平台的弹窗控制方法，其特征在于，所述将所述关联弹窗图层显示在所述弹窗图层框中的步骤之后，还包括：

当接收到弹窗删除指令时，删除前端页面中的所述关联弹窗和对应的所述关联弹窗图层，并删除所述数据库中存储的所述关联弹窗名称。

7.根据权利要求1所述的基于低代码平台的弹窗控制方法，其特征在于，所述显示对应的所述关联弹窗图层的所述关联弹窗的步骤包括：

获取预设的透明度值，通过opacity属性配置所述关联弹窗的透明度；

根据所述透明度显示对应的所述关联弹窗图层的所述关联弹窗。

8.一种基于低代码平台的弹窗控制装置，其特征在于，包括：

确定模块，用于确定用户在当前页面中拖动到预设工作面板的弹窗组件，根据所述弹窗组件创建对应的弹窗，并在预设的弹窗图层框中生成对应所述弹窗的弹窗图层；

存储模块，用于将所述弹窗的弹窗名称和当前页面的页面名称关联存储至数据库的弹窗表中；

关联模块，用于当检测到用户点击任意页面时，基于所述弹窗表确定与被点击的所述页面的页面名称相关联的所有弹窗名称，作为关联弹窗名称，将所述关联弹窗名称对应的所述弹窗图层和弹窗分别作为关联弹窗图层和关联弹窗，并将所述关联弹窗图层显示在所述弹窗图层框中；

锁定模块，用于当识别到用户点击任意一个所述关联弹窗图层的编辑按钮时，显示对应的所述关联弹窗图层的所述关联弹窗，并锁定剩余的所述关联弹窗图层和剩余的所述关联弹窗。

9.一种计算机设备，其特征在于，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如权利要求1至7中任一项所述的基于低代码平台的弹窗控制方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至7中任一项所述的基于低代码平台的弹窗控制方法的步骤。

Images