一种拖拽组件的方法、装置、终端设备以及存储介质制造方法及图纸

本申请适用于网页生成的技术领域，提供了一种拖拽组件的方法、装置、终端设备以及存储介质，其方法包括确定目标容器的组件属性信息；组件属性信息包含用于确定各个第一组件的第一拖拽操作的拖拽记录数组，以及用于确定各个第一组件在目标容器内的第一组件结构的组件树数组；响应于在目标容器内发起的对于第二组件的第二拖拽操作，确定第二组件与各个第一组件之间的第二组件结构；根据第二组件结构，将第二组件的配置对象添加至组件树数组；根据添加后的组件树数组，更新拖拽记录数组中与配置对象相对应的各个拖拽记录。本申请能够更改组件的顺序，提高页面布局的灵活性，适用于Web前端开发的应用场景。前端开发的应用场景。前端开发的应用场景。

【技术实现步骤摘要】
一种拖拽组件的方法、装置、终端设备以及存储介质


[0001]本申请属于网页生成的
，尤其涉及一种拖拽组件的方法、装置、终端设备以及存储介质。

技术介绍

[0002]前端开发是创建全球广域网(World Wide Web,WEB)页面或应用程序(Application,APP)等前端界面呈现给用户的过程，开发人员通常通过拖拽式Vue组件代码生成平台(Low Code Generator,LCG)生成Vue框架下的组件代码。
[0003]目前，LCG仅支持通过简单的标识将少量预设的组件按拖拽顺序存放到存储空间，无法更正存储空间中的组件的顺序；譬如：当存储空间已有多个组件，但是中间某几个组件的顺序出现错误时，只能删除这几个组件以及这几个组件之后的其他组件，然后重新拖拽，才能更正存储空间中的组件的顺序。
[0004]综上，现有的拖拽式Vue组件代码生成平台存在无法更改组件顺序的问题，有待进一步改进。

技术实现思路

[0005]有鉴于此，本申请实施例提供了一种拖拽组件的方法、装置、终端设备以及存储介质，以解决现有技术中无法更改组件顺序的问题。
[0006]第一方面，本申请实施例提供了一种拖拽组件的方法，包括：
[0007]确定目标容器的组件属性信息；所述目标容器用于构建指定项目的前端页面；所述组件属性信息包含用于确定各个第一组件的第一拖拽操作的拖拽记录数组，以及用于确定各个所述第一组件在所述目标容器内的第一组件结构的组件树数组；所述第一组件为已拖拽至所述目标容器内的组件；<br/>[0008]响应于在所述目标容器内发起的对于第二组件的第二拖拽操作，确定所述第二组件与各个所述第一组件之间的第二组件结构；所述第二组件为所述第一组件或与所述指定项目相对应的组件列表所包含的预选组件；
[0009]根据所述第二组件结构，将所述第二组件的配置对象添加至所述组件树数组；
[0010]根据添加后的所述组件树数组，更新所述拖拽记录数组中与所述配置对象相对应的各个拖拽记录。
[0011]第二方面，本申请实施例提供了一种拖拽组件的装置，包括：
[0012]确定属性信息模块，用于确定目标容器的组件属性信息；所述目标容器用于构建指定项目的前端页面；所述组件属性信息包含用于确定各个第一组件的第一拖拽操作的拖拽记录数组，以及用于确定各个所述第一组件在所述目标容器内的第一组件结构的组件树数组；所述第一组件为已添加至所述目标容器内的组件；
[0013]确定组件结构模块，用于响应于在所述目标容器内发起的对于第二组件的第二拖拽操作，确定所述第二组件与各个所述第一组件之间的第二组件结构；所述第二组件为所
述第一组件或与所述指定项目相对应的组件列表所包含的预选组件；
[0014]添加对象模块，用于根据所述第二组件结构，将所述第二组件的配置对象添加至所述组件树数组；
[0015]更新记录模块，用于根据添加后的所述组件树数组，更新所述拖拽记录数组中与所述配置对象相对应的各个拖拽记录。
[0016]第三方面，本申请实施例提供了一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述方法的步骤。
[0017]第四方面，本申请实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如上述方法的步骤。
[0018]本申请实施例与现有技术相比存在的有益效果是：在本申请的拖拽组件的方法中，根据第二组件结构把第二组件的配置对象添加到组件树数组，再根据添加后的组件树数组，更新拖拽记录数组，从而更改不同组件之间的顺序。通过上述拖拽组件的方法，能够便于开发者更改不同组件之间的顺序，在一定程度上解决当前的无法更改组件顺序的问题。
附图说明
[0019]为了更清楚地说明本申请实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0020]图1是本申请实施例中一种拖拽组件的方法的流程示意图；
[0021]图2是本申请实施例中S1011的流程示意图；
[0022]图3是本申请实施例中拖拽操作的结构示意图；
[0023]图4是本申请实施例中S202的流程示意图；
[0024]图5是本申请实施例中S2021的流程示意图；
[0025]图6是本申请实施例中S4011的流程示意图；
[0026]图7是本申请实施例中一种拖拽组件的装置的模块框图；
[0027]图8是本申请实施例中一种终端设备的示意图。
具体实施方式
[0028]以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本申请实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本申请。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本申请的描述。
[0029]为了说明本申请所述的技术方案，下面通过具体实施例来进行说明。
[0030]应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。
[0031]还应当理解，在此本申请说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本申请。如在本申请说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。
[0032]还应当进一步理解，在本申请说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。
[0033]另外，在本申请的描述中，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。
[0034]下面对本申请实施例提供的一种拖拽组件的方法进行描述，如图1所示，该方法包括但不限于包括以下步骤：
[0035]在S101中，确定目标容器的组件属性信息。
[0036]具体来说，在Web网页开发的应用场景中，目标容器能够容纳多种组件，从而构建指定项目的前端页面；为了便于说明本申请实施例，故把已经拖拽到目标容器内的组件称为第一组件；而组件属性信息包括但不限于拖拽记录数组和组件树数组，其中，拖拽记录数组用于确定各个第一组件的第一拖拽操作，第一拖拽操作可以为多个不同的第一组件之间的拖拽操作；而组件树数组用于确定各个第一组件在目标容器内的第一组件结构，该第一组件结构用于描述任意两个第一组件之间的层级嵌套关系，譬如表示任意两个第一组件之间的父子本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种拖拽组件的方法，其特征在于，包括：确定目标容器的组件属性信息；所述目标容器用于构建指定项目的前端页面；所述组件属性信息包含用于确定各个第一组件的第一拖拽操作的拖拽记录数组，以及用于确定各个所述第一组件在所述目标容器内的第一组件结构的组件树数组；所述第一组件为已拖拽至所述目标容器内的组件；响应于在所述目标容器内发起的对于第二组件的第二拖拽操作，确定所述第二组件与各个所述第一组件之间的第二组件结构；所述第二组件为所述第一组件或与所述指定项目相对应的组件列表所包含的预选组件；根据所述第二组件结构，将所述第二组件的配置对象添加至所述组件树数组；根据添加后的所述组件树数组，更新所述拖拽记录数组中与所述配置对象相对应的各个拖拽记录。2.如权利要求1所述的方法，其特征在于，所述响应于在所述目标容器内发起的对于第二组件的第二拖拽操作，确定所述第二组件与各个所述第一组件之间的第二组件结构，包括：当在所述目标容器内检测到关于任一个所述第二组件所发起的拖拽触发事件时，获取所述第二组件在所述目标容器内的起始位置信息；当检测到所述拖拽触发事件对应的拖拽结束事件时，获取所述第二组件在所述目标容器内的结束位置信息；结合所述起始位置信息和结束位置信息，确定所述第二组件结构。3.如权利要求2所述的方法，其特征在于，所述当在所述目标容器内检测到关于任一个所述第二组件所发起的拖拽触发事件时，获取所述第二组件在所述目标容器内的起始位置信息，包括：获取发起所述拖拽触发事件的所述第二组件在所述目标容器内的实时位置信息；根据所述实时位置信息生成预览示意图；所述预览示意图用于展示所述第二组件在所述实时位置时的前端页面。4.如权利要求1所述的方法，其特征在于，在所述确定目标容器的组件属性信息之前，还包括：获取所述指定项目中的配置文件，并读取所述配置文件中的多个配置信息；根据各个所述配置信息，生成所述指定项目对应的组件列表；所述配置信息包括组件名信息、组件来源信息、组件唯一标志信息以及组件标题信息；所述组件列表包括多个预选组件；所述预选组件为用于添加至所述目标容器内的组件；为每个所述预选组件配置拖拽属性，以生成各个所述预选组件对应的配置对象；响应于根据所述配置对象所发起的拖拽操作，将所述拖拽操作相对应的所述预选组件添加至所述目标容器，并将所有添加至所述目标容器内的所述预选组件识别为所述第一组件；基于所述目标容器内的所有第一组件的所述配置信息，生成所述组件属性信息。5.如权利要求4所述的方法，其...

【专利技术属性】
技术研发人员：胡伟峰，李炜，
申请(专利权)人：深圳太极数智技术有限公司，
类型：发明
国别省市：