CN114090005A - 一种基于Vue的可视化组件接入方法 - Google Patents

Abstract

本发明涉及一种基于Vue的可视化组件接入方法，其包括将组件接入到系统平台中，将操作抽象定义为包括组件属性、语义化、插槽、插槽事件的规格，并在配备所述抽象定义的规格文件解析模块和源码编译模块；按需配置组件的组件属性、语义化、插槽和插槽事件的规格文件；上传该组件按需配置的规格文件和源码文件至系统平台，加载组件到平台组件库；通过系统平台界面，将组件列表中的组件拖拽至画布，通过系统平台界面查看和导出生成的VUE源码，采用以上技术方案使组件接入过程简单化、标准化、可视化，只需极少的工作量，就可以完成Vue组件的规格配置，降低低代码平台的准入门槛。

Description

一种基于Vue的可视化组件接入方法

技术领域

本发明涉及可视化设计领域，具体涉及了一种基于Vue的可视化组件接入方法。

背景技术

Vue是一套用于构建用户界面的渐进式框架，基于Vue框架可以快速开发前端应用，实际中使用Vue开发了很多前端页面，但是其可操作性、可扩展性、后期维护性等均还存在问题。

专利号为CN202110117620.3，名称为可视化组件接入方法、系统、电子设备及存储介质，公开了获取服务端中的组件模型数据，用来确定待配置的可视化组件，根据获取到的组件模型数据，从服务端获取与组件模型数据对应的组件资源文件，根据组件模型数据和组件资源文件加载生成可视化组件，能够使系统具备快速的接入及开发各式各样的可视化组件的能力，并且能够实现在线更新可视化组件并且实时生效的目的，以应对用户越来越多个性的可视化需求。

但是上述专利的可拖拽使用的组件基本以系统平台提供为主，属性的配置基本以固定的几类属性和固定的几类样式为主，未涉及开放给开发者自有选择可配置属性选项，存在以下缺点：1、可供用户用于构建系统的组件数量相对有限，过于依赖平台提供方的开发和投入；2、由于多数可视化平台的所有组件的配置项为平台预设，组件配置项的固定，意味着用户无法根据业务需求进行调整和配置，也无法对灵活的、较为复杂的业务领域进行有效得自定义开发；3、针对现阶段大量已存在、企业内部私有的Vue组件无法进行有效复用。

发明内容

针对现有技术的不足，本发明提供一种定义组件规格配置导入规范，通为不同领域的人不同需求的人提供一个平台，将大量现有的Vue组件资源，通过标准的配置规格形式将组件导入的系统平台，在界面上采用拖拽的方式，实时的、可视的展示拖拽结果，从而达到快速生成完整的前端代码目的的基于Vue的可视化组件接入方法。

本发明的一种基于Vue的可视化组件接入方法，采用以下技术方案：其包括步骤如下：

S1：将组件接入到系统平台中的操作抽象定义为包括组件属性、语义化、插槽、插槽事件的规格，并在配备所述抽象定义的规格文件解析模块和源码编译模块，开放系统平台的属性配置，按系统平台的属性类型分组，所述每个分组映射对应属性配置；

S2：按需配置组件的组件属性、语义化、插槽和插槽事件的规格文件；

S3：在系统平台中上传该组件按需配置的规格文件和源码文件至系统平台；

S4：系统平台解析该组件按需配置的规格文件和源码文件，判断是否符合组件规格配置规范和是否有病毒或影响发明系统正常运行因素，选择拒绝或加载组件到平台组件库；

S5：通过系统平台界面，将组件列表中的组件拖拽至画布，并按照不同需求进行排版、布局和内容配置调整；

S6：通过系统平台界面查看和导出生成的VUE源码。

上述技术方案中，所述组件包括原有系统平台已开发好的组件或基于Vue前端开发工具对应需求开发的组件或Vue组件库中的组件。

上述技术方案中，步骤S1中所述系统平台的属性类型包括组、文本、数值、布尔、枚举、图片、json对象、图片。

上述技术方案中，所述步骤S1中的组件属性的规格内容包括组件业务唯一标识、配置属性名称以及属性类型，所述属性类型对应分组映射相应属性配置。

上述技术方案中，步骤S1中的语义化的规格包括配置当前平台组件内部允许的组件、允许在内部规格配置初始的组件数量、可以在平台配置新增或删减组件以及组件存放路径。

上述技术方案中，步骤S1中的插槽的规格包括插槽内容配置、插槽的内部名称、插槽的额外配置项、插槽是否启用、插槽提示信息。

上述技术方案中，步骤S1中的插槽事件的规格包括基于原生HTML的事件和Vue的事件，描述组件已实现和支持的事件以及配置事件触发后需要执行的内容。

与现有技术相比，本发明的有益效果如下：

1、将Vue前端组件开发抽象为属性、语义化、插槽、事件，支持属性的灵活定义，简化了繁杂的业务领域概念，将大量现有的Vue组件资源，通过标准的配置规格形式将组件导入的系统平台，用户在系统界面通过可视化的拖拽操作，实时生成高质量的Vue前端代码，大大降低已有组件对可视化平台的接入难度。

2、平台的组件支持用户扩展，平台默认预置一部分组件和已开发页面模板，平台提供统一的组件导入平台规格配置说明，组件开发者可根据规范将基于Vue开发的组件导入平台使用，解决传统低代码平台组件数量单一；

3、用户扩展的组件支持灵活的组件配置项，除了传统的通用属性（如：组件名、组件标识、宽高样式、边框样式等固定配置项），允许组件开发者提供业务侧的配置项（如：开发一个用户名片组件，开放用户名、职位等配置），解决了传统低代码平台无法针对业务领域自定义开发的问题；

4、支持已有的组件进行导入低代码平台，基于平台的规格配置规范，可针对已有组件进行规格规范配置，并完成已有组件的导入，解决了传统低代码平台无法复用已有组件的问题；

5、针对导入平台的Vue组件，无需对原有的Vue组件进行任何修改，本发明创造之处，考虑到原有组件的导入难度，采用规格和组件分离的方案，可以做到无需修改任何原有的代码的方式，完成原有组件的无侵入、更优雅的导入；

6、源码质量的保证，本发明配套的规格配置和组件源码解析方案，针对几个容易带来漏洞和问题的地方首先进行了封堵和处理，并且不断优化源码生成方案。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，在附图中：

图1为本发明的组件接入整体流程图；

图2为本发明的基于Vue前端开发工具对应需求开发的组件接入流程图；

图3为本发明的对组件库中的组件接入流程图。

具体实施方式

参见图1所示，本发明的组件包括原有系统平台已开发好的组件或Vue组件库中的组件或基于Vue前端开发工具对应需求开发的组件，组件名name: 定了接入系统平台的组件唯一名称，不可重复，示例：name: ‘xtc-table’，唯一名称为xtc-table。

其包括步骤如下：

S1：将组件接入到系统平台中的操作抽象定义为包括组件属性、语义化、插槽、插槽事件的规格，并在配备所述抽象定义的规格文件解析模块和源码编译模块，开放系统平台的属性配置，按系统平台的属性类型分组，所述每个分组映射对应属性配置；

S2：按需配置组件的组件属性、语义化、插槽和插槽事件的规格文件；

S3：在系统平台中上传该组件按需配置的规格文件和源码文件至系统平台；

S4：系统平台解析该组件按需配置的规格文件和源码文件，判断是否符合组件规格配置规范和是否有病毒或影响发明系统正常运行因素，选择拒绝或加载组件到平台组件库；

S5：通过系统平台界面，将组件列表中的组件拖拽至画布，并按照不同需求进行排版、布局和内容配置调整；

S6：通过系统平台界面查看和导出生成的VUE源码。

步骤S2中的组件属性规格文件：

properties:属性规格配置的开始；

identifier:业务属性的唯一标识，在当前属性内部需保持唯一，如:identifier: ‘tableLayout’，组件的业务标识是tableLayout；

text: 在系统平台配置属性时展示的名称，示例: text: ‘布局’，系统属性配置面板显示名称为布局；

defaultValue: 属性默认值，示例: defaultValue : ‘auto'，在布局这个属性中，默认布局的值为auto；

type: 属性类型，这个属性对应系统平台封装好的几个类型，示例: type:‘radio’，布局属性的类型是单选框，在系统配置属性的时候，可以通过点击直接单选，可供选择内容配置在options.items。

步骤S2中的插槽规格文件：

slots: 插槽内容配置，插槽内可支持拖拽组件；

name: 插槽内部的name，标识插槽名字，示例:name: ‘footer’，插槽名字为footer；

options: 插槽的额外配置项；

defaultEnableSlot: 默认是否启用插槽，配置插槽是否启用。可在系统平台中点击开启和关闭指定插槽；

slotTip: 插槽提示信息，在画布上没有任何内容时提示，一般用作插槽内容提示。示例：在本例中，标识footer插槽为表格尾部配置。

步骤S2中的语义化规格文件：

semantic: 语义化配置内容开始，允许内容为数组，即允许多个语义化配置；

typeRestrict: 语义化类型限制，示例: typeRestrict: ‘a-col'，当前组件的语义化内容仅允许拖入组件名称为a-col的组件；

typeDescribe: 类型描述；

initComponentNumber: 初始化组件个数，配置组件拖动到画布时，默认生成子组件的个数；

options: 其余配置项放置此处；

componentType: 语义化内部的组件类型，分为平台自身提供和第三方提供；

path: 子组件存放路径（分类），示例：path: ‘base'，子组件为基础类型组件。

步骤S2中的插槽事件文件：

events：插槽事件内容开始，包括基于原生HTML的事件和Vue的事件，描述组件已实现和支持的事件以及配置事件；

type:描述组件的动作列表，例如组件提供单击功能type: ‘click’。

参见图2所示，基于Vue前端开发工具对应需求开发的组件或Vue组件库中的组件接入步骤包括：

S1：开发对应需求的组件或者在Vue组件库中的组件找到所需的组件；

S2：配置组件的组件属性、语义化、插槽和插槽事件的规格文件；

S3：在系统平台中上传该组件的规格文件和源码文件至系统平台；

S4：系统平台解析该组件规格文件和源码文件，判断是否符合组件规格配置规范和是否有病毒或影响发明系统正常运行因素，若不符合则选择拒绝加载组件到平台组件库，若符合则加载组件到平台组件库；

S5：通过系统平台界面，将组件列表中的组件拖拽至画布，并按照不同需求进行排版、布局和内容配置调整；

S6：通过系统平台界面查看和导出生成的VUE源码。

参见图3所示，原有系统平台已开发好的组件接入步骤包括：

S1：输入业务需求的组件和确定页面布局和元素；

S2：将组件列表中的组件拖拽至画布，并按照不同需求进行排版、布局和内容配置调整，所述内容配置包括配置组件样式、配置组件事件、配置组件数据；

S3：通过系统平台界面查看和导出生成的VUE源码。

尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。

Claims (7)

1.一种基于Vue的可视化组件接入方法，其特征在于，其包括步骤如下：

S1：将组件接入到系统平台中的操作抽象定义为包括组件属性、语义化、插槽、插槽事件的规格，并在配备所述抽象定义的规格文件解析模块和源码编译模块，开放系统平台的属性配置，按系统平台的属性类型分组，所述每个分组映射对应属性配置；

S2：按需配置组件的组件属性、语义化、插槽和插槽事件的规格文件；

S3：在系统平台中上传该组件按需配置的规格文件和源码文件至系统平台；

S4：系统平台解析该组件按需配置的规格文件和源码文件，判断是否符合组件规格配置规范和是否有病毒或影响发明系统正常运行因素，选择拒绝或加载组件到平台组件库；

S5：通过系统平台界面，将组件列表中的组件拖拽至画布，并按照不同需求进行排版、布局和内容配置调整；

S6：通过系统平台界面查看和导出生成的VUE源码。

2.根据权利要求1所述的一种基于Vue的可视化组件接入方法，其特征在于，所述组件包括原有系统平台已开发好的组件或基于Vue前端开发工具对应需求开发的组件或Vue组件库中的组件。

3.根利要求1所述的一种基于Vue的可视化组件接入方法，其特征在于，步骤S1中所述系统平台的属性类型包括组、文本、数值、布尔、枚举、图片、json对象、图片。

4.根利要求1所述的一种基于Vue的可视化组件接入方法，其特征在于，所述步骤S1中的组件属性的规格内容包括组件业务唯一标识、配置属性名称以及属性类型，所述属性类型对应分组映射相应属性配置。

5.根据权利要求1所述的一种基于Vue的可视化组件接入方法，其特征在于，步骤S1中的语义化的规格包括配置当前平台组件内部允许的组件、允许在内部规格配置初始的组件数量、可以在平台配置新增或删减组件以及组件存放路径。

6.根据权利要求1所述的一种基于Vue的可视化组件接入方法，其特征在于，步骤S1中的插槽的规格包括插槽内容配置、插槽的内部名称、插槽的额外配置项、插槽是否启用、插槽提示信息。

7.根据权利要求1所述的一种基于Vue的可视化组件接入方法，其特征在于，步骤S1中的插槽事件的规格包括基于原生HTML的事件和Vue的事件，描述组件已实现和支持的事件以及配置事件触发后需要执行的内容。

Images