设计场景的组件转换方法、装置、计算机设备及存储介质制造方法及图纸

本发明专利技术公开了一种设计场景的组件转换方法、装置、计算机设备及存储介质，涉及界面设计技术。该方法包括：当在画布中操作第一组件时，获取第一组件的组件信息和布局信息，第一组件为第一版本的组件；根据第一组件确定目标组件；根据目标组件的目标对象、目标对象适配的目标方法以及布局信息生成超文本标记语句；根据超文本标记语句和目标组件的目标组件信息确定目标文件，目标文件中记载适配第二版本的组件信息；当触发第二组件时，根据目标文件生成第二组件，第二组件为第二版本的目标组件。通过对目标组件的组件对象配置目标方法生成目标文件，通过对目标文件的解析生成第二版本的目标组件，实现目标组件的版本转换，提高转换效率。换效率。换效率。

【技术实现步骤摘要】
设计场景的组件转换方法、装置、计算机设备及存储介质


[0001]本专利技术实施例涉及界面设计
，尤其涉及一种设计场景的组件转换方法、装置、计算机设备及存储介质。

技术介绍

[0002]随着前端技术发展，Vue版本从2.0升级到3.0。假如在设计器画布中使用前端开发框架Vue2.0的组件设计了前端界面，通过设计器的导出功能导出的代码部分要运行在Vue3.0前端开发框架上，另一部分需要运行在Vue3.0框架。如何实现画布中的vue2.0如何转化成vue3.0的称为亟待解决的问题。

技术实现思路

[0003]本专利技术提供一种设计场景的组件转换方法、装置、计算机设备及存储介质，以实现将画布中的vue2.0组件转换为vue3.0组件。
[0004]第一方面，本专利技术实施例提供了一种设计场景的组件转换方法，包括：
[0005]当在画布中操作第一组件时，获取所述第一组件的组件信息和布局信息，所述第一组件为第一版本的组件；
[0006]根据第一组件确定目标组件；
[0007]根据目标组件的目标对象、所述目标对象适配的目标方法以及所述布局信息生成超文本标记语句；
[0008]根据所述超文本标记语句和所述目标组件的目标组件信息确定目标文件，所述目标文件中记载适配第二版本的组件信息；
[0009]当触发第二组件时，根据所述目标文件生成第二组件，所述第二组件为第二版本的目标组件。
[0010]第二方面，本专利技术实施例还提供了一种设计场景的组件转换装置，包括：
[0011]第一组件获取模块，用于当在画布中操作第一组件时，获取所述第一组件的组件信息和布局信息，所述第一组件为第一版本的组件；
[0012]目标组件确定模块，用于根据第一组件确定目标组件；
[0013]超文本标记语句生成模块，用于根据目标组件的目标对象、所述目标对象适配的目标方法以及所述布局信息生成超文本标记语句；
[0014]目标文件创建模块，用于根据所述超文本标记语句和所述目标组件的目标组件信息确定目标文件，所述目标文件中记载适配第二版本的组件信息；
[0015]第二组件生成模块，用于当触发第二组件时，根据所述目标文件生成第二组件，所述第二组件为第二版本的目标组件。
[0016]第三方面，本专利技术实施例还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现如本专利技术实施例所示的设计场景的组件转换方法。
[0017]第四方面，本专利技术实施例还提供了一种包含计算机可执行指令的存储介质，计算机可执行指令在由计算机处理器执行时用于执行如本专利技术实施例所示的设计场景的组件转换方法。
[0018]本专利技术实施例提供的设计场景的组件转换方法，当在画布中操作第一组件时，获取所述第一组件的组件信息和布局信息，所述第一组件为第一版本的组件；根据第一组件确定目标组件；根据目标组件的目标对象、所述目标对象适配的目标方法以及所述布局信息生成超文本标记语句；根据所述超文本标记语句和所述目标组件的目标组件信息确定目标文件，所述目标文件中记载适配第二版本的组件信息；当触发第二组件时，根据所述目标文件生成第二组件，所述第二组件为第二版本的目标组件。相对于目前设计场景中存在无法快速实现组件版本的转换的问题，本专利技术实施例提供的设计场景的组件转换方法能够在第一版本的设计界面中对组件进行设计，通过对目标组件的组件对象配置目标方法生成目标文件，通过对目标文件的解析生成第二版本的目标组件，实现目标组件的版本转换，提高转换效率。
附图说明
[0019]图1是本专利技术实施例一中的设计场景的组件转换方法的流程图。
[0020]图2是本专利技术实施例二中的设计场景的组件转换方法的流程图。
[0021]图3是本专利技术实施例三中的设计场景的组件转换系统的结构示意图。
[0022]图4是本专利技术实施例四中的计算机设备的结构示意图。
具体实施方式
[0023]下面结合附图和实施例对本专利技术作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本专利技术，而非对本专利技术的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本专利技术相关的部分而非全部结构。
[0024]实施例一
[0025]图1为本专利技术实施例一提供的设计场景的组件转换方法的流程图，本实施例可适用于使用vue2.0设计界面编辑vue2.0组件后，导出为vue3.0组件的情况，该方法可以由计算机设备来执行，具体包括如下步骤：
[0026]步骤110、当在画布中操作第一组件时，获取第一组件的组件信息和布局信息，第一组件为第一版本的组件。
[0027]可选的，当在画布中操作第一组件时，获取第一组件的组件信息和布局信息，可通过下述方式实施：
[0028]在画布中拖入第一组件时，获取第一组件的组件信息和布局信息；
[0029]或者，渲染第一组件时，获取第一组件的组件信息的布局信息。
[0030]可选的，获取第一组件的组件信息，可通过下述方式实施：
[0031]获取第一组件的组件标签、组件名称、组件标识、组件ID或组件渲染参数中的一种或多种的组合。
[0032]步骤120、根据第一组件确定目标组件。
[0033]步骤130、根据目标组件的目标对象、目标对象适配的目标方法以及布局信息生成
超文本标记语句。
[0034]可选的，根据目标组件的目标对象、目标对象适配的目标方法以及布局信息生成超文本标记语句，可通过下述方式实施：
[0035]步骤301、获取目标组件的目标对象。
[0036]可选的，获取目标组件的目标对象，包括：根据关键字确定目标对象。
[0037]步骤302、根据预设映射关系，确定目标对象适配的目标方法。
[0038]其中，目标方法包括如下任意一种或多种：ref、reactive、toRef或toRefs。
[0039]步骤303、为目标对象添加目标方法。
[0040]步骤304、根据添加后的目标对象生成超文本标记语句。
[0041]步骤305、在超文本标记语句的外层添加布局信息。
[0042]步骤140、根据超文本标记语句和目标组件的目标组件信息确定目标文件，目标文件中记载适配第二版本的组件信息。
[0043]可选的，根据超文本标记语句和目标组件的目标组件信息确定目标文件，可通过下述方式实施：
[0044]将超文本标记语句存储于目标文件的模板部分；
[0045]将目标组件的目标组件信息存储于目标文件的数据部分。
[0046]步骤150、当触发第二组件时，根据目标文件生成第二组件，第二组件为第二版本的目标组件。
[0047]可选的，当触发第二组件时，根据目标文件生成第二组件，可通过下述方式实施：
[0048]根据目标文件确定上下文对象；
[0049]解析上下文对象，生成游标本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种设计场景的组件转换方法，其特征在于，包括：当在画布中操作第一组件时，获取所述第一组件的组件信息和布局信息，所述第一组件为第一版本的组件；根据第一组件确定目标组件；根据目标组件的目标对象、所述目标对象适配的目标方法以及所述布局信息生成超文本标记语句；根据所述超文本标记语句和所述目标组件的目标组件信息确定目标文件，所述目标文件中记载适配第二版本的组件信息；当触发第二组件时，根据所述目标文件生成第二组件，所述第二组件为第二版本的目标组件。2.根据权利要求1所述的方法，其特征在于，当在画布中操作第一组件时，获取所述第一组件的组件信息和布局信息，包括：在画布中拖入第一组件时，获取所述第一组件的组件信息和布局信息；或者，渲染第一组件时，获取所述第一组件的组件信息的布局信息。3.根据权利要求1所述的方法，其特征在于，所述获取所述第一组件的组件信息，包括：获取所述第一组件的组件标签、组件名称、组件标识、组件ID或组件渲染参数中的一种或多种的组合。4.根据权利要求1所述的方法，其特征在于，所述根据目标组件的目标对象、所述目标对象适配的目标方法以及所述布局信息生成超文本标记语句，包括：获取目标组件的目标对象；根据预设映射关系，确定所述目标对象适配的目标方法；为所述目标对象添加所述目标方法；根据添加后的目标对象生成超文本标记语句；在所述超文本标记语句的外层添加所述布局信息。5.根据权利要求4所述的方法，其特征在于，所述获取目标组件的目标对象，包括：根据关键字确定目标对象；所述目标方法包括如下任意一种或多种：ref、reactive、toRef或toRefs。6.根据权利要...

【专利技术属性】
技术研发人员：徐律冠，武峰波，张晓华，罗欢，袁进学，陈振英，萧展辉，杨漾，
申请(专利权)人：南方电网数字平台科技广东有限公司，
类型：发明
国别省市：