一种基于vue自定义节点的组件交互方法及系统技术方案

本发明专利技术提出了一种基于vue自定义节点的组件交互方法及系统，涉及web前端技术领域。该方法通过基于vue生成自定义节点并创建控制器后将自定义节点挂载到原型节点，并将原型节点挂载到组件后向控制器注册，通过控制器管理组件的注册、统一操作及与外部的交互并维护节点间的连接关系并格式化导出为文件，当控制器监听到交互事件时读取文件中的组件节点并根据组件交互更新节点和节点间的连接关系绘制展示，实现组件自定义节点的读取修改删除保存及节点交互、样式变化操作，使得组件具有动态交互能力的同时支持对每个自定义节点本身样式的动态更改，在生成自适应关系连线的基础上，令节点样式随着组件的交互而动态变化，展示和交互效果较好，提升用户体验。提升用户体验。提升用户体验。

【技术实现步骤摘要】
一种基于vue自定义节点的组件交互方法及系统


[0001]本专利技术涉及web前端
，具体而言，涉及一种基于vue自定义节点的组件交互方法及系统。

技术介绍

[0002]可交互的视觉呈现是前端技术最关心的方面之一。经常会面临这样的场景，角色与角色间具有强相关性，多个角色组成网状结构，或者需要表达一整个流程各个节点间的继承关系。譬如，一部小说登场角色之间关系，公司工作流的流转，程序类图之间的继承。将流程逻辑通过树状或网状形式呈现出来增加信息密度，让用户快速直观地理解表达内容，而不仅仅是在编辑结束后静态地展示，而是在任何时刻作为普通的组件可以交互、更改、保存、读取。
[0003]如今现有前端web组件大多只实现静态展示的功能，而具有一定交互能力的组件对每个节点本身的动态更改没有支持，节点不能随着交互而变化，导致组件展示效果较差，影响了用户体验。

技术实现思路

[0004]本专利技术的目的在于提供一种基于vue自定义节点的组件交互方法及系统，其通过基于vue生成自定义节点并创建控制器后将自定义节点挂载到原型节点，并将原型节点挂载到组件后向控制器注册，通过控制器管理组件的注册、统一操作及与外部的交互并维护节点间的连接关系并格式化导出为文件，当控制器监听到交互事件时读取文件中的组件节点并根据组件交互更新节点和节点间的连接关系然后绘制出来进行展示，实现了组件自定义节点的读取修改删除保存及节点交互、样式变化等操作，使得组件具有动态交互能力的同时支持对每个自定义节点本身样式的动态更改，在生成自适应关系连线的基础上，令节点样式随着组件的交互而动态变化，达到较好的组件展示和交互效果，提升了用户体验。
[0005]本专利技术的实施例是这样实现的：
[0006]第一方面，本申请实施例提供一种基于vue自定义节点的组件交互方法，包括以下步骤：
[0007]基于vue生成自定义节点并创建控制器；
[0008]利用vue挂载机制将自定义节点挂载到原型节点，并将原型节点挂载到组件后向控制器注册；
[0009]通过控制器在组件内维护节点间的连接关系，并将组件导出为预设格式的文件进行存储；
[0010]当控制器监听到交互事件时读取文件中的组件，根据组件交互更新节点间的连接关系，并同步绘制出所有节点及节点间的连接关系。
[0011]在本专利技术的一些实施例中，通过控制器对组件的操作包括添加删除自定义节点、新增删除节点关系连线、节点交互、样式变化。
[0012]在本专利技术的一些实施例中，通过所述原型节点实现节点的拖拽、定位、交互事件传递的操作。
[0013]在本专利技术的一些实施例中，注册的组件通过所述控制器预留的事件提交接口和外部组件进行交互。
[0014]在本专利技术的一些实施例中，所述同步绘制出所有节点及节点间的连接关系的步骤包括：
[0015]从原型节点获取所有节点坐标，每次选定距离较近两个节点计算连线；
[0016]基于canvas绘制节点间的连线，若不能直接连接则在两个节点之间进行插值，间接绘制折线来表示节点间的连接。
[0017]在本专利技术的一些实施例中，所述预设格式的文件包括JSON格式文件。
[0018]第二方面，本申请实施例提供一种基于vue自定义节点的组件交互系统，其包括：
[0019]创建和生成模块，用于基于vue生成自定义节点并创建控制器；；
[0020]挂载模块，用于利用vue挂载机制将自定义节点挂载到原型节点，并将原型节点挂载到组件后向控制器注册；
[0021]导出模块，用于通过控制器在组件内维护节点间的连接关系，并将组件导出为预设格式的文件进行存储；
[0022]更新和绘制模块，用于当控制器监听到交互事件时读取文件中的组件，根据组件交互更新节点间的连接关系，并同步绘制出所有节点及节点间的连接关系。
[0023]第三方面，本申请实施例提供一种电子设备，其包括存储器，用于存储一个或多个程序；处理器，当上述一个或多个程序被上述处理器执行时，实现如上述第一方面中任一项上述的方法。
[0024]第四方面，本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如上述第一方面中任一项上述的方法。
[0025]相对于现有技术，本专利技术的实施例至少具有如下优点或有益效果：
[0026]本专利技术的实施例提出了一种基于vue自定义节点的组件交互方法，其通过基于vue生成自定义节点并创建控制器后将自定义节点挂载到原型节点，并将原型节点挂载到组件后向控制器注册，通过控制器管理组件的注册、统一操作及与外部的交互并维护节点间的连接关系并格式化导出为文件，当控制器监听到交互事件时读取文件中的组件节点并根据组件交互更新节点和节点间的连接关系然后绘制出来进行展示，实现了组件自定义节点的读取修改删除保存及节点交互、样式变化等操作，使得组件具有动态交互能力的同时支持对每个自定义节点本身样式的动态更改，在生成自适应关系连线的基础上，令节点样式随着组件的交互而动态变化，达到较好的组件展示和交互效果，提升了用户体验。
附图说明
[0027]为了更清楚地说明本专利技术实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本专利技术的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
[0028]图1为本专利技术一种基于vue自定义节点的组件交互方法一实施例的流程图；
[0029]图2为本专利技术实施例中同步绘制出所有节点及节点间的连接关系的步骤的具体流程图；
[0030]图3为本专利技术一种基于vue自定义节点的组件交互系统一实施例的结构框图；
[0031]图4为本专利技术实施例提供的一种电子设备的结构框图。
[0032]图标：1、创建和生成模块；2、挂载模块；3、导出模块；4、更新和绘制模块；5、处理器；6、存储器；7、数据总线。
具体实施方式
[0033]为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。
[0034]实施例1
[0035]请参阅图1
‑
2，本申请实施例提供了一种基于vue自定义节点的组件交互方法，其通过基于vue生成自定义节点并创建控制器后将自定义节点挂载到原型节点，并将原型节点挂载到组件后向控制器注册，通过控制器管理组件的注册、统一操作及与外部的交互并维护节点间的连接关系并格式化导出为文件，当控制器监听到交互事件时读取文件中的组件节点并根据组件交互更新节点和节点间的连接关系然后绘制出来进行展示，实现了组件自定义节点的读取修改删除保存及节点交互、样式变化等操本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于vue自定义节点的组件交互方法，其特征在于，包括：基于vue生成自定义节点并创建控制器；利用vue挂载机制将自定义节点挂载到原型节点，并将原型节点挂载到组件后向控制器注册；通过控制器在组件内维护节点间的连接关系，并将组件导出为预设格式的文件进行存储；当控制器监听到交互事件时读取文件中的组件，根据组件交互更新节点间的连接关系，并同步绘制出所有节点及节点间的连接关系。2.如权利要求1所述的一种基于vue自定义节点的组件交互方法，其特征在于，通过控制器对组件的操作包括添加删除自定义节点、新增删除节点关系连线、节点交互、样式变化。3.如权利要求2所述的一种基于vue自定义节点的组件交互方法，其特征在于，通过所述原型节点实现节点的拖拽、定位、交互事件传递的操作。4.如权利要求3所述的一种基于vue自定义节点的组件交互方法，其特征在于，注册的组件通过所述控制器预留的事件提交接口和外部组件进行交互。5.如权利要求4所述的一种基于vue自定义节点的组件交互方法，其特征在于，所述同步绘制出所有节点及节点间的连接关系的步骤包括：从原型节点获取所有节点坐标，每次选定距离较近两个节点计算连线；基于canvas绘制节点间的连线，若不能直接连接则在两个节...

【专利技术属性】
技术研发人员：钱威，袁武，
申请(专利权)人：天翼电子商务有限公司，
类型：发明
国别省市：