一种基于VUE的通用页面通知弹窗插件生成方法及系统技术方案

本发明专利技术提出了一种基于VUE的通用页面通知弹窗插件生成方法及系统，其中方法具体包括：步骤1、创建用于存放插件注册主文件和基础组件文件的文件夹；步骤2、在基础组件文件中编写基础弹窗组件；步骤3、在插件注册主文件中预设具有添加全局方法的信息对象，并创建自渲染组件；步骤4、实例化自渲染组件，并放进一个实例数组中，根据所述实例数组中已有的实例为其指定出现位置；步骤5、预设实例化对象的生命周期，以及过渡状态的事件及属性变化；步骤6、导出生成的具有添加全局方法的信息对象；步骤7、将导出的信息对象置于项目中，实现通用插件的引入。本申请在Vue框架下创建通用的页面通知插件实现了弹窗插件解耦、可重用、可自定义，以及调用简便的需求。及调用简便的需求。及调用简便的需求。

【技术实现步骤摘要】
一种基于VUE的通用页面通知弹窗插件生成方法及系统


[0001]本专利技术涉及一种基于VUE的通用页面通知弹窗插件生成方法及系统，特别是涉及前端视觉开发


技术介绍

[0002]在互联网的浪潮下，web前端技术蓬勃发展，同时为了兼顾用户对视觉呈现上的审美需求，web可视化界面已不再是只能进行简单页面显示和对用户单向输出的技术。随着ES6和Nodejs以及webpack打包工具等的出现，前端的页面逻辑变的越来越复杂，为了实现良好的用户体验，可视化界面上的信息提示成为不可缺少的一环。
[0003]现有技术中，常采用阻塞用户操作的单调弹窗方式进行呈现，但是随着用户需求的提高，阻塞用户操作的单调弹窗方式已不再能满足用户需求；而且由于逻辑散落各处，提示、警告的方法也只能散落各处，为重用、模块化、解耦等思想带来了不小的阻力；同时现有技术中的弹窗在用户频繁触发提示的情况下很可能出现重叠甚至导致程序漏洞的出现。

技术实现思路

[0004]专利技术目的：提出一种基于VUE的通用页面通知弹窗插件生成方法及系统，以解决现有技术存在的上本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于VUE的通用页面通知弹窗插件生成方法，其特征在于，具体包括以下步骤：步骤1、根据需求创建用于存放插件注册主文件和基础组件文件的文件夹；步骤2、在基础组件文件中编写一个基础弹窗组件，并通过暴露自定义组件属性的方式，为后续的需求提供显示消息属性的依据；步骤3、在插件注册主文件中预设具有添加全局方法的信息对象，并创建自渲染组件；其中，所述添加全局方法在实现调用时，涉及两个参数；所述两个参数中的第一个参数为实例对象，第二个参数为全局选项；步骤4、实例化创建的自渲染组件，并放进一个实例数组中，根据所述实例数组中已有的实例为其指定出现位置；步骤5、预设实例化对象的生命周期，以及过渡状态的事件及属性变化；所述生命周期包括：创建状态、保持状态和销毁状态；步骤6、导出生成的具有添加全局方法的信息对象；步骤7、将步骤6中导出的信息对象置于项目中，实现通用插件的引入。2.根据权利要求1所述的一种基于VUE的通用页面通知弹窗插件生成方法，其特征在于，步骤7中实现通用插件引入进项目后，进一步包括在项目主文件中通过Vue.use(message,{globalOpts})代码指令引入通用插件。3.根据权利要求1所述的一种基于VUE的通用页面通知弹窗插件生成方法，其特征在于，针对步骤2中构建的基础弹窗组件，通过Vue plugin install的代码指令将其注册成为插件。4.根据权利要求1所述的一种基于VUE的通用页面通知弹窗插件生成方法，其特征在于，步骤4在实例化创建的自渲染组件同时，向其中注入一个名为message的调用方法，并在所述调用方法内部实例化组件、注入属性值、计算组件出现位置并实现完整的生命周期。5.根据权利要求1所述的一种基于VUE的通用页面通知弹窗插件生成方法，其特征在于，实际项目应用中，在实现通用插件的引入后，通过一个实例方法可在任意时间和任意地点调用弹窗，通过弹窗的方式实现信息通知。6.根据权利要求1所述的一种基于VUE的通用页面通知弹窗插件生成方法，其特征在于，在实际项目应用中创建弹窗时，通过在任意逻辑提示处使用this.$message({options})可实现已经创建完的插件调用；其中options为生成弹窗的自定义属性。7.根据权利要求6所述的一种基于VUE的通用页面通知弹窗插件生成方法，其特征在于，实际项目...

【专利技术属性】
技术研发人员：王梦辉，王喜，魏武，
申请(专利权)人：南京控维通信科技有限公司，
类型：发明
国别省市：