[发明专利]一种基于Vue的组件可视化系统及方法

权利要求书

1.一种基于Vue的组件可视化系统，其特征在于，包括：

组件库，所述组件库包括若干自描述组件，每个所述自描述组件均自带用于描述数据属性的元数据，所述元数据为基于Vue实现的统一数据可读模型；

组件解析模块，用于扫描所述组件库，获取符合自描述的所述自描述组件，并解析所述自描述组件的所述元数据，形成组件列表；

可视化操作模块，包括组件预览单元、组件属性单元、组件工作单元，其中，所述组件预览单元用于读取所述组件列表并在可视化界面中呈现，所述组件属性单元用于基于选中的所述自描述组件的所述元数据动态生成组件属性并在可视化界面中呈现，所述组件工作单元用于所述自描述组件在可视化界面中的操作。

2.根据权利要求1所述的基于Vue的组件可视化系统，其特征在于，解析之后的所述元数据包括基础数据和/或专有数据；其中，

所述基础数据设定有默认值，所述组件解析模块用于自动加载所述基础数据设定的默认值，获取所述自描述组件的数据信息；

所述专有数据约定有数据源，所述组件解析模块用于自动加载所述专有数据约定的数据源，获取所述自描述组件的数据信息。

3.根据权利要求2所述的基于Vue的组件可视化系统，其特征在于，所述组件解析模块还用于基于所述专有数据约定的数据源的内容更新，实时动态更新所述组件列表中对应所述自描述组件的数据信息。

4.根据权利要求1至3任意一项所述的基于Vue的组件可视化系统，其特征在于，还包括：导出模块，用于将所述组件工作单元中设计的页面以所述自描述组件为单位组装成JSON文件导出。

5.根据权利要求1所述的基于Vue的组件可视化系统，其特征在于，所述自描述组件包括基础组件、流程图组件、活动图组件、图表组件。

6.根据权利要求1所述的基于Vue的组件可视化系统，其特征在于，所述元数据包括名称、标题、图标、默认样式、组件类型、专有属性，其中，所述专有属性为所述自描述组件的表征，用于提供图片预览与地址属性或文字输入属性或图例数据输入属性。

7.根据权利要求6所述的基于Vue的组件可视化系统，其特征在于，所述组件解析模块还用于根据所述组件类型对所述组件列表内的所述自描述组件分类存放。

8.一种基于Vue的组件可视化方法，基于如权利要求1至7任意一项所述基于Vue的组件可视化系统，其特征在于，包括以下步骤：

扫描组件库，获取符合自描述的自描述组件，并解析所述自描述组件的元数据，形成组件列表，其中，所述组件库包括若干所述自描述组件，每个所述自描述组件均自带用于描述数据属性的所述元数据，所述元数据为基于Vue实现的统一数据可读模型；

读取所述组件列表并在可视化界面中呈现，通过在可视化界面中操作所述自描述组件进行界面设计，获取设计页面，其中，选中所述自描述组件，基于其所述元数据动态生成组件属性并在可视化界面中呈现。

9.根据权利要求8所述的基于Vue的组件可视化方法，其特征在于，解析之后的所述元数据包括基础数据和/或专有数据，所述基础数据设定有默认值，所述专有数据约定有数据源；

其中，所述解析所述自描述组件的元数据，形成组件列表进一步包括：

自动加载所述基础数据设定的默认值，获取所述自描述组件的数据信息；

自动加载所述专有数据约定的数据源，获取所述自描述组件的数据信息。

10.根据权利要求9所述的基于Vue的组件可视化方法，其特征在于，在所述通过在可视化界面中操作所述自描述组件进行设计界面的过程中，还包括步骤：

基于所述专有数据约定的数据源的内容更新，实时动态更新所述组件列表中对应所述自描述组件的数据信息。