CN116027937A - 待编辑组件的渲染方法和装置、存储介质及电子装置 - Google Patents

Abstract

本申请公开了一种待编辑组件的渲染方法和装置、存储介质及电子装置，涉及智慧家庭技术领域，该待编辑组件的渲染方法包括获取待编辑组件的第一属性信息，其中，所述第一属性信息中包括所述待编辑组件的编辑信息；根据所述编辑信息确定编辑面板中表单组件的类型，并根据所述表单组件的类型在所述编辑面板中显示所述表单组件，其中，所述编辑面板用于通过所述表单组件编辑所述待编辑组件的第一属性信息；接收通过所述表单组件对所述待编辑组件的编辑操作，并根据所述编辑操作渲染所述待编辑组件，采用上述技术方案，解决了编辑面板有新增的表单组件类型、有新增的表单组件属性，往往需要对编辑面板的渲染引擎进行修改等问题。

Description

待编辑组件的渲染方法和装置、存储介质及电子装置

技术领域

本申请涉及通信领域，具体而言，涉及一种待编辑组件的渲染方法和装置、存储介质及电子装置。

背景技术

目前很多低代码平台编辑面板中的表单组件需要创建额外的配置文件，增加了组件开发的复杂度；编辑面板的表单组件无法进行灵活的页签和分组设置；表单组件之间无法实现逻辑联动。如果编辑面板有新增的表单组件类型、有新增的表单组件属性，往往需要对编辑面板的渲染引擎进行修改。

针对相关技术中，编辑面板有新增的表单组件类型、有新增的表单组件属性，往往需要对编辑面板的渲染引擎进行修改等问题，尚未提出有效的解决方案。

发明内容

本申请实施例提供了一种待编辑组件的渲染方法和装置、存储介质及电子装置，以至少解决相关技术中，编辑面板有新增的表单组件类型、有新增的表单组件属性，往往需要对编辑面板的渲染引擎进行修改等问题。

根据本申请实施例的一个实施例，提供了一种待编辑组件的渲染方法，包括：获取待编辑组件的第一属性信息，其中，所述第一属性信息包括：所述待编辑组件的编辑信息；根据所述编辑信息确定编辑面板中表单组件的类型，并根据所述表单组件的类型在所述编辑面板中显示所述表单组件，其中，所述编辑面板用于通过所述表单组件编辑所述待编辑组件的第一属性信息；接收通过所述表单组件对所述待编辑组件的第一属性信息的编辑操作，并根据所述编辑操作渲染所述待编辑组件。

在一个示例性实施例中，根据所述编辑信息确定编辑面板中表单组件的类型，包括：建立表单组件类型映射表，其中，所述表单组件类型映射表用于指示第一类型信息与表单组件的类型的对应关系；确定所述编辑信息中类型字段携带的第一类型信息；根据所述表单组件类型映射表确定所述第一类型信息对应的表单组件的类型。

在一个示例性实施例中，建立表单组件类型映射表之后，所述方法还包括：在所述编辑面板存在新增的表单组件的情况下，确定所述新增的表单组件的类型，以及所述新增的表单组件的类型对应的第二类型信息；在所述表单组件类型映射表中增加所述新增的表单组件的类型与所述第二类型信息的对应关系。

在一个示例性实施例中，根据所述编辑信息确定编辑面板中表单组件的类型，包括：确定所述编辑信息中显示字段携带的显示信息；在所述显示信息指示隐藏所述表单组件的情况下，禁止根据所述编辑信息确定编辑面板中表单组件的类型；在所述显示信息指示显示所述表单组件的情况下，根据所述编辑信息确定编辑面板中表单组件的类型。

在一个示例性实施例中，根据所述表单组件的类型在所述编辑面板中显示所述表单组件，包括：确定所述待编辑组件的样式面板分组列表信息和属性面板分组列表信息；根据所述样式面板分组列表信息和所述属性面板分组列表信息确定所述待编辑组件的分组信息；根据所述分组信息和所述表单组件的类型在所述编辑面板中显示所述表单组件。

在一个示例性实施例中，根据所述分组信息和所述表单组件的类型在所述编辑面板中显示所述表单组件，包括：确定所述分组信息对应的表单组件集合；根据所述表单组件的类型在所述表单组件集合中确定所述表单组件，并在所述编辑面板中显示所述表单组件。

在一个示例性实施例中，根据所述编辑操作渲染所述待编辑组件，包括：根据所述编辑操作确定所述待编辑组件的第二属性信息；将所述第二属性信息发送至状态管理模式库，其中，所述状态管理模式库用于存储所述待编辑组件的第二属性信息；通过所述状态管理模式库将所述第二属性信息发送至显示界面，以使所述显示界面根据所述第二属性信息渲染所述待编辑组件。

根据本申请实施例的另一个实施例，还提供了一种待编辑组件的渲染装置，包括：获取模块，用于获取待编辑组件的第一属性信息，其中，所述第一属性信息包括：所述待编辑组件的编辑信息；确定模块，用于根据所述编辑信息确定编辑面板中表单组件的类型，并根据所述表单组件的类型在所述编辑面板中显示所述表单组件，其中，所述编辑面板用于通过所述表单组件编辑所述待编辑组件的第一属性信息；渲染模块，用于接收通过所述表单组件对所述待编辑组件的第一属性信息的编辑操作，并根据所述编辑操作渲染所述待编辑组件。

在一个示例性实施例中，确定模块，用于建立表单组件类型映射表，其中，所述表单组件类型映射表用于指示第一类型信息与表单组件的类型的对应关系；确定所述编辑信息中类型字段携带的第一类型信息；根据所述表单组件类型映射表确定所述第一类型信息对应的表单组件的类型。

在一个示例性实施例中，上述装置还包括：编辑模块，用于建立表单组件类型映射表之后，所述方法还包括：在所述编辑面板存在新增的表单组件的情况下，确定所述新增的表单组件的类型，以及所述新增的表单组件的类型对应的第二类型信息；在所述表单组件类型映射表中增加所述新增的表单组件的类型与所述第二类型信息的对应关系。

在一个示例性实施例中，根据所述编辑信息确定编辑面板中表单组件的类型，包括：确定所述编辑信息中显示字段携带的显示信息；在所述显示信息指示隐藏所述表单组件的情况下，禁止根据所述编辑信息确定编辑面板中表单组件的类型；在所述显示信息指示显示所述表单组件的情况下，根据所述编辑信息确定编辑面板中表单组件的类型。

在一个示例性实施例中，确定模块，用于确定所述待编辑组件的样式面板分组列表信息和属性面板分组列表信息；根据所述样式面板分组列表信息和所述属性面板分组列表信息确定所述待编辑组件的分组信息；根据所述分组信息和所述表单组件的类型在所述编辑面板中显示所述表单组件。

在一个示例性实施例中，确定模块，用于确定所述分组信息对应的表单组件集合；根据所述表单组件的类型在所述表单组件集合中确定所述表单组件，并在所述编辑面板中显示所述表单组件。

在一个示例性实施例中，渲染模块，用于根据所述编辑操作确定所述待编辑组件的第二属性信息；将所述第二属性信息发送至状态管理模式库，其中，所述状态管理模式库用于存储所述待编辑组件的第二属性信息；通过所述状态管理模式库将所述第二属性信息发送至显示界面，以使所述显示界面根据所述第二属性信息渲染所述待编辑组件。

根据本申请实施例的又一方面，还提供了一种计算机可读的存储介质，该计算机可读的存储介质中存储有计算机程序，其中，该计算机程序被设置为运行时执行上述待编辑组件的渲染方法。

根据本申请实施例的又一方面，还提供了一种电子装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，上述处理器通过计算机程序执行上述的待编辑组件的渲染方法。

在本申请实施例中，获取待编辑组件的第一属性信息，其中，所述第一属性信息包括：所述待编辑组件的编辑信息；根据所述编辑信息确定编辑面板中表单组件的类型，并根据所述表单组件的类型在所述编辑面板中显示所述表单组件，其中，所述编辑面板用于通过所述表单组件编辑所述待编辑组件的第一属性信息；接收通过所述表单组件对所述待编辑组件的第一属性信息的编辑操作，并根据所述编辑操作渲染所述待编辑组件；采用上述技术方案，解决了编辑面板有新增的表单组件类型、有新增的表单组件属性，往往需要对编辑面板的渲染引擎进行修改等问题，本发明实施例通过待编辑组件的第一属性信息动态确定表单组件属性和编辑面板中表单组件，使用动态组件实现属性面板表单的通用渲染引擎，新增编辑类型或修改某个编辑类型的属性，无需改动渲染引擎的代码，实现属性面板表单组件与渲染引擎的解耦。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

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

图1是本申请实施例的一种待编辑组件的渲染方法的硬件环境示意图；

图2是根据本申请实施例的待编辑组件的渲染方法的流程图；

图3是根据本申请实施例的待编辑组件的渲染方法的示意图；

图4是根据本申请实施例的一种待编辑组件的渲染装置的结构框图(一)；

图5是根据本申请实施例的一种待编辑组件的渲染装置的结构框图(二)。

具体实施方式

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

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

根据本申请实施例的一个方面，提供了一种待编辑组件的渲染方法。该待编辑组件的渲染方法广泛应用于智慧家庭(Smart Home)、智能家居、智能家用设备生态、智慧住宅(Intelligence House)生态等全屋智能数字化控制应用场景。可选地，在本实施例中，上述待编辑组件的渲染方法可以应用于如图1所示的由终端设备102和服务器104所构成的硬件环境中。如图1所示，服务器104通过网络与终端设备102进行连接，可用于为终端或终端上安装的客户端提供服务(如应用服务等)，可在服务器上或独立于服务器设置数据库，用于为服务器104提供数据存储服务，可在服务器上或独立于服务器配置云计算和/或边缘计算服务，用于为服务器104提供数据运算服务。

上述网络可以包括但不限于以下至少之一：有线网络，无线网络。上述有线网络可以包括但不限于以下至少之一：广域网，城域网，局域网，上述无线网络可以包括但不限于以下至少之一：WIFI(Wireless Fidelity，无线保真)，蓝牙。终端设备102可以并不限定于为PC、手机、平板电脑、智能空调、智能烟机、智能冰箱、智能烤箱、智能炉灶、智能洗衣机、智能热水器、智能洗涤设备、智能洗碗机、智能投影设备、智能电视、智能晾衣架、智能窗帘、智能影音、智能插座、智能音响、智能音箱、智能新风设备、智能厨卫设备、智能卫浴设备、智能扫地机器人、智能擦窗机器人、智能拖地机器人、智能空气净化设备、智能蒸箱、智能微波炉、智能厨宝、智能净化器、智能饮水机、智能门锁等。

在本实施例中提供了一种待编辑组件的渲染方法，应用于计算机终端，图2是根据本申请实施例的待编辑组件的渲染方法的流程图，该流程包括如下步骤：

步骤S202，获取待编辑组件的第一属性信息，其中，所述第一属性信息包括：所述待编辑组件的编辑信息；

需要说明的是，上述第一属性信息可以理解Prop属性信息，其中，Prop属性是一个对象，在这个对象里可以定义一些数据，而这些数据可以通过父组件传递给子组件，在没有状态管理机制的时候，prop属性是组件之间主要的通信方式。

步骤S204，根据所述编辑信息确定编辑面板中表单组件的类型，并根据所述表单组件的类型在所述编辑面板中显示所述表单组件，其中，所述编辑面板用于通过所述表单组件编辑所述待编辑组件的第一属性信息；

步骤S206，接收通过所述表单组件对所述待编辑组件的第一属性信息的编辑操作，并根据所述编辑操作渲染所述待编辑组件。

通过上述步骤，获取待编辑组件的第一属性信息，其中，所述第一属性信息包括：所述待编辑组件的编辑信息；根据所述编辑信息确定编辑面板中表单组件的类型，并根据所述表单组件的类型在所述编辑面板中显示所述表单组件，其中，所述编辑面板用于通过所述表单组件编辑所述待编辑组件的第一属性信息；接收通过所述表单组件对所述待编辑组件的第一属性信息的编辑操作，并根据所述编辑操作渲染所述待编辑组件，解决了相关技术中，编辑面板有新增的表单组件类型、有新增的表单组件属性，往往需要对编辑面板的渲染引擎进行修改等问题，本发明实施例通过待编辑组件的第一属性信息动态确定表单组件属性和编辑面板中表单组件，使用动态组件实现属性面板表单的通用渲染引擎，新增编辑类型或修改某个编辑类型的属性，无需改动渲染引擎的代码，实现属性面板表单组件与渲染引擎的解耦。

在一个示例性实施例中，根据所述编辑信息确定编辑面板中表单组件的类型，包括：建立表单组件类型映射表，其中，所述表单组件类型映射表用于指示第一类型信息与表单组件的类型的对应关系；确定所述编辑信息中类型字段携带的第一类型信息；根据所述表单组件类型映射表确定所述第一类型信息对应的表单组件的类型。

需要说明的是，需要预先确定表单组件类型映射表，举例说明，第一类型信息为input的情况下，对应的表单组件的类型为文本；第一类型信息为image的情况下，对应的表单组件的类型为图片；第一类型信息为radio的情况下，对应的表单类型为单选……需要说明的是，上述表单组件类型映射表为目标对象设定的，本发明实施例对此不作限定。

进一步的，在确定表单组件类型映射表的情况下，根据编辑信息中的类型字段中携带的第一类型信息在表单组件类型映射表中查找对应的表单组件类型。

在一个示例性实施例中，建立表单组件类型映射表之后，还包括：在所述编辑面板存在新增的表单组件的情况下，确定所述新增的表单组件的类型，以及所述新增的表单组件的类型对应的第二类型信息；在所述表单组件类型映射表中增加所述新增的表单组件的类型与所述第二类型信息的对应关系。

本发明实施例中，在新增表单组件的情况下，在所述表单组件类型映射表中增加所述新增的表单组件的类型与所述第二类型信息的对应关系，进而根据表单组件类型映射表在编辑面板显示对应的表单组件，本发明实施例使用动态组件实现编辑面板表单的通用渲染引擎，新增编辑类型或修改某个编辑类型的属性，无需改动渲染引擎的代码，实现编辑面板表单组件与渲染引擎的解耦。

在一个示例性实施例中，根据所述编辑信息确定编辑面板中表单组件的类型，包括：确定所述编辑信息中显示字段携带的显示信息；在所述显示信息指示隐藏所述表单组件的情况下，禁止根据所述编辑信息确定编辑面板中表单组件的类型；在所述显示信息指示显示所述表单组件的情况下，根据所述编辑信息确定编辑面板中表单组件的类型。

也就是说，本发明实施例还可以设置是否显示第一类型信息对应的表单组件，具体方式为：设置第一类型信息对应的显示字段中的显示信息，在所述显示信息指示隐藏所述表单组件的情况下，编辑面板中不再显示对应的表单组件；在所述显示信息指示显示所述表单组件的情况下，编辑面板中显示对应的表单组件，通过本发明实施例可以设置显示与隐藏的逻辑关系，可以灵活选择表单组件的显示或隐藏方式。

在一个示例性实施例中，根据所述表单组件的类型在所述编辑面板中显示所述表单组件，包括：确定所述待编辑组件的样式面板分组列表信息和属性面板分组列表信息；根据所述样式面板分组列表信息和所述属性面板分组列表信息确定所述待编辑组件的分组信息；根据所述分组信息和所述表单组件的类型在所述编辑面板中显示所述表单组件。

需要说明的是，待编辑组件的样式面板分组列表信息和属性面板分组列表信息可以理解为编辑面板中表单组件的分组信息，例如一个按钮组件，按钮组件的背景有颜色和大小，按钮组件的文字也有颜色和大小，所述按钮组件的分组可能就有两个分组：背景和文字。

在一个示例性实施例中，根据所述分组信息和所述表单组件的类型在所述编辑面板中显示所述表单组件，包括：确定所述分组信息对应的表单组件集合；根据所述表单组件的类型在所述表单组件集合中确定所述表单组件，并在所述编辑面板中显示所述表单组件。

在一个示例性实施例中，根据所述编辑操作渲染所述待编辑组件，包括：根据所述编辑操作确定所述待编辑组件的第二属性信息；将所述第二属性信息发送至状态管理模式库，其中，所述状态管理模式库用于存储所述待编辑组件的第二属性信息；通过所述状态管理模式库将所述第二属性信息发送至显示界面，以使所述显示界面根据所述第二属性信息渲染所述待编辑组件。

具体地，将待编辑组件的对象实例存储在全局window对象中；将待编辑组件的对象属性信息存储在状态管理模式库vuex中；编辑面板从window对象的$vue属性中获取组件的第一属性信息，使用编辑面板的表单组件修改当前画布中的待编辑组件的第一属性信息；将修改后的第一属性信息同步到vuex中；从vuex中将修改后的第一属性信息回传给画布中待编辑组件；画布中待编辑组件进行属性和样式的变更。

为了更好的理解上述待编辑组件的渲染方法的过程，以下再结合可选实施例对上述待编辑组件的渲染的实现方法流程进行说明，但不用于限定本申请实施例的技术方案。

在本实施例中提供了一种待编辑组件的渲染方法，图3是根据本申请实施例的待编辑组件的渲染方法的示意图，如图3所示，具体如下步骤：

前置步骤：

1、按一定的规则配置vue页面组件的editor信息；

2、将组件拖拽到画布中；

3、定义好表单组件类型的映射关系map。

步骤S301：选中或修改画布中的组件(相当于上述实施例中的待编辑组件)；

步骤S302：将选中的组件的对象实例存储在全局window对象中；

步骤S303：将选中的组件的对象属性信息存储在vuex中；

步骤S304：样式/属性面板(相当于上述实施例中的编辑面板)从window对象的$vue属性中获取组件的editor信息、样式面板分组列表信息、属性面板分组列表信息；

步骤S305：编辑面板中的vue动态组件按editor中配置的type字段，渲染不同类型的表单组件；

步骤S306：使用编辑面板表单组件修改当前画布中选中的组件属性；

步骤S307：将修改后的组件属性同步到vuex中；

步骤S308：从vuex中将修改后的属性信息回传给画布中当前选中的组件；

步骤S309：对画布中当前选中的组件进行属性和样式的变更。

本发明实施例中的组件prop中配置描述当前组件可编辑的属性用什么样式的表单渲染，并且可配置不同表单组件间的逻辑关系；组件对象中可配置样式和属性面板中表单组件的分组信息；利用vue动态组件实现的通用的表单组件渲染逻辑，可支持任意表单组件的渲染，并且支持表单组件的自定义属性的设置。

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

图4是根据本申请实施例的一种待编辑组件的渲染装置的结构框图(一)；如图4所示，包括：

获取模块42，用于获取待编辑组件的第一属性信息，其中，所述第一属性信息包括：所述待编辑组件的编辑信息；

需要说明的是，上述第一属性信息可以理解Prop属性信息，其中，Prop属性是一个对象，在这个对象里可以定义一些数据，而这些数据可以通过父组件传递给子组件，在没有状态管理机制的时候，prop属性是组件之间主要的通信方式。

确定模块44，用于根据所述编辑信息确定编辑面板中表单组件的类型，并根据所述表单组件的类型在所述编辑面板中显示所述表单组件，其中，所述编辑面板用于通过所述表单组件编辑所述待编辑组件的第一属性信息；

渲染模块46，用于接收通过所述表单组件对所述待编辑组件的第一属性信息的编辑操作，并根据所述编辑操作渲染所述待编辑组件。

通过上述装置，获取待编辑组件的第一属性信息，其中，所述第一属性信息包括：所述待编辑组件的编辑信息；根据所述编辑信息确定编辑面板中表单组件的类型，并根据所述表单组件的类型在所述编辑面板中显示所述表单组件，其中，所述编辑面板用于通过所述表单组件编辑所述待编辑组件的第一属性信息；接收通过所述表单组件对所述待编辑组件的第一属性信息的编辑操作，并根据所述编辑操作渲染所述待编辑组件，解决了相关技术中，编辑面板有新增的表单组件类型、有新增的表单组件属性，往往需要对编辑面板的渲染引擎进行修改等问题，本发明实施例通过待编辑组件的第一属性信息动态确定表单组件属性和编辑面板中表单组件，使用动态组件实现属性面板表单的通用渲染引擎，新增编辑类型或修改某个编辑类型的属性，无需改动渲染引擎的代码，实现属性面板表单组件与渲染引擎的解耦。

在一个示例性实施例中，确定模块44，用于建立表单组件类型映射表，其中，所述表单组件类型映射表用于指示第一类型信息与表单组件的类型的对应关系；确定所述编辑信息中类型字段携带的第一类型信息；根据所述表单组件类型映射表确定所述第一类型信息对应的表单组件的类型。

需要说明的是，需要预先确定表单组件类型映射表，举例说明，第一类型信息为input的情况下，对应的表单组件的类型为文本；第一类型信息为image的情况下，对应的表单组件的类型为图片；第一类型信息为radio的情况下，对应的表单类型为单选……需要说明的是，上述表单组件类型映射表为目标对象设定的，本发明实施例对此不作限定。

进一步的，在确定表单组件类型映射表的情况下，根据编辑信息中的类型字段中携带的第一类型信息在表单组件类型映射表中查找对应的表单组件类型。

在一个示例性实施例中，图5是根据本申请实施例的一种待编辑组件的渲染装置的结构框图(二)；如图5所示，上述装置还包括：编辑模块52，用于建立表单组件类型映射表之后，所述方法还包括：在所述编辑面板存在新增的表单组件的情况下，确定所述新增的表单组件的类型，以及所述新增的表单组件的类型对应的第二类型信息；在所述表单组件类型映射表中增加所述新增的表单组件的类型与所述第二类型信息的对应关系。

本发明实施例中，在新增表单组件的情况下，在所述表单组件类型映射表中增加所述新增的表单组件的类型与所述第二类型信息的对应关系，进而根据表单组件类型映射表在编辑面板显示对应的表单组件，本发明实施例使用动态组件实现编辑面板表单的通用渲染引擎，新增编辑类型或修改某个编辑类型的属性，无需改动渲染引擎的代码，实现编辑面板表单组件与渲染引擎的解耦。

在一个示例性实施例中，根据所述编辑信息确定编辑面板中表单组件的类型，包括：确定所述编辑信息中显示字段携带的显示信息；在所述显示信息指示隐藏所述表单组件的情况下，禁止根据所述编辑信息确定编辑面板中表单组件的类型；在所述显示信息指示显示所述表单组件的情况下，根据所述编辑信息确定编辑面板中表单组件的类型。

也就是说，本发明实施例还可以设置是否显示第一类型信息对应的表单组件，具体方式为：设置第一类型信息对应的显示字段中的显示信息，在所述显示信息指示隐藏所述表单组件的情况下，编辑面板中不再显示对应的表单组件；在所述显示信息指示显示所述表单组件的情况下，编辑面板中显示对应的表单组件，通过本发明实施例可以设置显示与隐藏的逻辑关系，可以灵活选择表单组件的显示或隐藏方式。

在一个示例性实施例中，确定模块44，用于确定所述待编辑组件的样式面板分组列表信息和属性面板分组列表信息；根据所述样式面板分组列表信息和所述属性面板分组列表信息确定所述待编辑组件的分组信息；根据所述分组信息和所述表单组件的类型在所述编辑面板中显示所述表单组件。

需要说明的是，待编辑组件的样式面板分组列表信息和属性面板分组列表信息可以理解为编辑面板中表单组件的分组信息，例如一个按钮组件，按钮组件的背景有颜色和大小，按钮组件的文字也有颜色和大小，所述按钮组件的分组可能就有两个分组：背景和文字。

在一个示例性实施例中，确定模块44，用于确定所述分组信息对应的表单组件集合；根据所述表单组件的类型在所述表单组件集合中确定所述表单组件，并在所述编辑面板中显示所述表单组件。

在一个示例性实施例中，渲染模块48，用于根据所述编辑操作确定所述待编辑组件的第二属性信息；将所述第二属性信息发送至状态管理模式库，其中，所述状态管理模式库用于存储所述待编辑组件的第二属性信息；通过所述状态管理模式库将所述第二属性信息发送至显示界面，以使所述显示界面根据所述第二属性信息渲染所述待编辑组件。

具体地，将待编辑组件的对象实例存储在全局window对象中；将待编辑组件的对象属性信息存储在状态管理模式库vuex中；编辑面板从window对象的$vue属性中获取组件的第一属性信息，使用编辑面板的表单组件修改当前画布中的待编辑组件的第一属性信息；将修改后的第一属性信息同步到vuex中；从vuex中将修改后的第一属性信息回传给画布中待编辑组件；画布中待编辑组件进行属性和样式的变更。

本申请的实施例还提供了一种存储介质，该存储介质包括存储的程序，其中，上述程序运行时执行上述任一项的方法。

可选地，在本实施例中，上述存储介质可以被设置为存储用于执行以下步骤的程序代码：

S1，获取待编辑组件的第一属性信息，其中，所述第一属性信息包括：所述待编辑组件的编辑信息；

S2，根据所述编辑信息确定编辑面板中表单组件的类型，并根据所述表单组件的类型在所述编辑面板中显示所述表单组件，其中，所述编辑面板用于通过所述表单组件编辑所述待编辑组件的第一属性信息；

S3，接收通过所述表单组件对所述待编辑组件的第一属性信息的编辑操作，并根据所述编辑操作渲染所述待编辑组件。

本申请的实施例还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。

可选地，上述电子装置还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。

可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：

S1，获取待编辑组件的第一属性信息，其中，所述第一属性信息包括：所述待编辑组件的编辑信息；

S2，根据所述编辑信息确定编辑面板中表单组件的类型，并根据所述表单组件的类型在所述编辑面板中显示所述表单组件，其中，所述编辑面板用于通过所述表单组件编辑所述待编辑组件的第一属性信息；

S3，接收通过所述表单组件对所述待编辑组件的第一属性信息的编辑操作，并根据所述编辑操作渲染所述待编辑组件。

可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、只读存储器(Read-Only Memory，简称为ROM)、随机存取存储器(Random Access Memory，简称为RAM)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

可选地，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。

以上所述仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。

Claims (10)

1.一种待编辑组件的渲染方法，其特征在于，包括：

获取待编辑组件的第一属性信息，其中，所述第一属性信息包括：所述待编辑组件的编辑信息；

根据所述编辑信息确定编辑面板中表单组件的类型，并根据所述表单组件的类型在所述编辑面板中显示所述表单组件，其中，所述编辑面板用于通过所述表单组件编辑所述待编辑组件的第一属性信息；

接收通过所述表单组件对所述待编辑组件的第一属性信息的编辑操作，并根据所述编辑操作渲染所述待编辑组件。

2.根据权利要求1所述的待编辑组件的渲染方法，其特征在于，根据所述编辑信息确定编辑面板中表单组件的类型，包括：

建立表单组件类型映射表，其中，所述表单组件类型映射表用于指示第一类型信息与表单组件的类型的对应关系；

确定所述编辑信息中类型字段携带的第一类型信息；

根据所述表单组件类型映射表确定所述第一类型信息对应的表单组件的类型。

3.根据权利要求2所述的待编辑组件的渲染方法，其特征在于，建立表单组件类型映射表之后，所述方法还包括：

在所述编辑面板存在新增的表单组件的情况下，确定所述新增的表单组件的类型，以及所述新增的表单组件的类型对应的第二类型信息；

在所述表单组件类型映射表中增加所述新增的表单组件的类型与所述第二类型信息的对应关系。

4.根据权利要求1所述的待编辑组件的渲染方法，其特征在于，根据所述编辑信息确定编辑面板中表单组件的类型，包括：

确定所述编辑信息中显示字段携带的显示信息；

在所述显示信息指示隐藏所述表单组件的情况下，禁止根据所述编辑信息确定编辑面板中表单组件的类型；

在所述显示信息指示显示所述表单组件的情况下，根据所述编辑信息确定编辑面板中表单组件的类型。

5.根据权利要求1所述的待编辑组件的渲染方法，其特征在于，根据所述表单组件的类型在所述编辑面板中显示所述表单组件，包括：

确定所述待编辑组件的样式面板分组列表信息和属性面板分组列表信息；根据所述样式面板分组列表信息和所述属性面板分组列表信息确定所述待编辑组件的分组信息；

根据所述分组信息和所述表单组件的类型在所述编辑面板中显示所述表单组件。

6.根据权利要求5所述的待编辑组件的渲染方法，其特征在于，根据所述分组信息和所述表单组件的类型在所述编辑面板中显示所述表单组件，包括：

确定所述分组信息对应的表单组件集合；

根据所述表单组件的类型在所述表单组件集合中确定所述表单组件，并在所述编辑面板中显示所述表单组件。

7.根据权利要求1所述的待编辑组件的渲染方法，其特征在于，根据所述编辑操作渲染所述待编辑组件，包括：

根据所述编辑操作确定所述待编辑组件的第二属性信息；

将所述第二属性信息发送至状态管理模式库，其中，所述状态管理模式库用于存储所述待编辑组件的第二属性信息；

通过所述状态管理模式库将所述第二属性信息发送至显示界面，以使所述显示界面根据所述第二属性信息渲染所述待编辑组件。

8.一种待编辑组件的渲染装置，其特征在于，包括：

获取模块，用于获取待编辑组件的第一属性信息，其中，所述第一属性信息包括：所述待编辑组件的编辑信息；

确定模块，用于根据所述编辑信息确定编辑面板中表单组件的类型，并根据所述表单组件的类型在所述编辑面板中显示所述表单组件，其中，所述编辑面板用于通过所述表单组件编辑所述待编辑组件的第一属性信息；

渲染模块，用于接收通过所述表单组件对所述待编辑组件的第一属性信息的编辑操作，并根据所述编辑操作渲染所述待编辑组件。

9.一种计算机可读的存储介质，其特征在于，所述计算机可读的存储介质包括存储的程序，其中，所述程序运行时执行上述权利要求1至7任一项中所述的方法。

10.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为通过所述计算机程序执行所述权利要求1至7任一项中所述的方法。

Images