CN114153519A - 一种基于vue的通用页面通知弹窗插件生成方法及系统 - Google Patents

Abstract

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

Description

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

技术领域

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

背景技术

在互联网的浪潮下，web前端技术蓬勃发展，同时为了兼顾用户对视觉呈现上的审美需求，web可视化界面已不再是只能进行简单页面显示和对用户单向输出的技术。随着ES6和Nodejs以及webpack打包工具等的出现，前端的页面逻辑变的越来越复杂，为了实现良好的用户体验，可视化界面上的信息提示成为不可缺少的一环。

现有技术中，常采用阻塞用户操作的单调弹窗方式进行呈现，但是随着用户需求的提高，阻塞用户操作的单调弹窗方式已不再能满足用户需求；而且由于逻辑散落各处，提示、警告的方法也只能散落各处，为重用、模块化、解耦等思想带来了不小的阻力；同时现有技术中的弹窗在用户频繁触发提示的情况下很可能出现重叠甚至导致程序漏洞的出现。

发明内容

发明目的：提出一种基于VUE的通用页面通知弹窗插件生成方法及系统，以解决现有技术存在的上述问题，通过构建一个即插即用的弹窗插件，平衡用户体验与设计思想间的冲突，同时实现降低重复代码的存在，减少冗余，提高开发效率。

技术方案：第一方面，提出了一种基于VUE的通用页面通知弹窗插件生成方法，该方法具体包括以下步骤：

步骤1、根据需求创建用于存放插件注册主文件和基础组件文件的文件夹；

步骤2、在基础组件文件中编写一个基础弹窗组件，并通过暴露自定义组件属性的方式，为后续的需求提供显示消息属性的依据；

步骤3、在插件注册主文件中预设具有添加全局方法的信息对象，并创建自渲染组件；其中，所述添加全局方法在实现调用时，涉及两个参数；所述两个参数中的第一个参数为实例对象，第二个参数为全局选项；

步骤4、实例化创建的自渲染组件，并放进一个实例数组中，根据所述实例数组中已有的实例为其指定出现位置；

步骤5、预设实例化对象的生命周期，以及过渡状态的事件及属性变化；所述生命周期包括：创建状态、保持状态和销毁状态；

步骤6、导出生成的具有添加全局方法的信息对象；

步骤7、将步骤6中导出的信息对象置于项目中，实现通用插件的引入。

在第一方面的一些可实现方式中，步骤7中实现通用插件引入进项目后，进一步包括在项目主文件中通过Vue.use(message,{globalOpts})代码指令引入通用插件。

进一步的，针对步骤2中构建的基础弹窗组件，通过Vue plugin install的代码指令将其注册成为插件。

进一步的，步骤4在实例化创建的自渲染组件同时，向其中注入一个调用方法，并在所述调用方法内部实例化组件、注入属性值、计算组件出现位置并实现完整的生命周期。

在第一方面的一些可实现方式中，实际项目应用中，在实现通用插件的引入后，通过一个实例方法可在任意时间和任意地点调用弹窗，通过弹窗的方式实现信息通知。

进一步的，在实际项目应用中创建弹窗时，通过在任意逻辑提示处使用this.$message({options})可实现已经创建完的插件调用；其中options为信息提示文件中自定义的属性。

进一步的，实际项目应用中弹窗创建的过程进一步包括以下步骤：

步骤a、调用插件中的组件自渲染方法并生成弹窗实例，并将实例放入数组计算其出现的位置；

步骤b、弹窗组件创建，执行实例化对象生命周期的方法，制定实例化对象的内容、创建动画，以及将弹窗组件绑定至文档对象模型上；

步骤c、在预设时间内显示弹窗中的信息至用户端的可视化界面；

步骤d、超过弹窗预设的显示时间时，执行销毁生命周期中的方法，销毁弹窗组件。

其中，所述步骤d在实现销毁组件时，进一步为创建小时动画，当动画结束后，将弹窗组件从文档对象模型上移除并销毁。

第二方面，提出一种基于VUE的通用页面通知弹窗插件生成系统，该系统具体包括：

文件夹，被设置为根据需求存放插件注册主文件和基础组件文件；

基础组件文件，包括基础弹窗组件，被设置为通过props对象暴露自定义组件属性，用于为弹窗组件实例提供自定义属性；

插件注册主文件，包括具有添加全局方法的信息对象，被设置为根据需求在添加全局方法内自定义实例属性和初始化全局选项参数，并创建自渲染组件；

数组，被设置为存放实例化组件的容器。

在第二方面的一些可实现方式中，通用页面通知弹窗插件生成系统在实现通用页面通知弹窗插件生成方法时，首先在所述文件夹中创建index.js插件注册主文件和message.vue基础组件文件；其次，在message.vue信息提示文件中编写一个基础弹窗组件，并通过Vue组件的props暴露自定义组件属性，为弹窗组件实例提供自定义属性；再次，在index.js插件注册主文件中定义一个MESSAGE对象并使其具有install全局插件注册方法，并根据自己需要在install插件注册方法内自定义和初始化全局选项参数，并使用Vue.extend及其render方法创建自渲染组件；从次，实例化Vue.extend创建的自渲染组件，将其放进一个实例数组中，并根据数组中已有的实例为其指定出现位置；最后，预设实例化对象的生命周期，以及过渡状态的事件及属性变化，并在完成后使用module.exports导出MESSAGE对象，置于项目中，实现通用插件的引入。

有益效果：本发明提出了一种基于VUE的通用页面通知弹窗插件生成方法及系统，一方面，通过分离出一个即插即用的弹窗插件来平衡用户体验与设计思想间的冲突，从而实现用户体验感的提升。另一方面，通过将弹窗逻辑均集中在插件中的方式，实现插件之间的解耦可重用，以及在用户频繁触发提示时也能避免遮盖的情况。另外，自定义弹窗的设计，在满足弹窗提示需求的同时，更贴合用户审美上的视觉需求。

附图说明

图1为本发明实施例的数据处理流程图。

图2为本发明实施例插件构建流程示意图。

图3为本发明实施例弹窗的创建过程示意图。

具体实施方式

在下文的描述中，给出了大量具体的细节以便提供对本发明更为彻底的理解。然而，对于本领域技术人员而言显而易见的是，本发明可以无需一个或多个这些细节而得以实施。在其他的例子中，为了避免与本发明发生混淆，对于本领域公知的一些技术特征未进行描述。

申请人认为在现有技术处理弹窗信息提示显示时，常采用针对性构建弹窗组件方式，即在需要使用弹窗的界面，针对性的构建一个弹窗组件。虽然这样可以充分自定义每个页面的弹窗部分，凸显个性化设计，但是这样的代码实现量剧增，导致内存占用量变大，同时大量重复代码的存在，也会导致代码的冗余出现，降低工作效率。另外，弹窗逻辑被分散在不同实施界面的不同处，因此，当需要针对性的做出弹窗修改时便需要同时修改连带的多处部分，进一步导致出错的概率增加，降低开发效率。

另一方面，在实现弹窗信息提示显示时，采用在根组件中编写一个弹窗组件，利用事件总线通知弹窗的显示与隐藏的方式实现，虽然不需要重复编写代码且代码逻辑大部分集中在一处，但问题在于JavaScript为单线程语言，渲染及业务处理位于同一线程上，使用事件总线推送可能在某些复杂情况下无法推送至组件处导致无法弹窗，同时一旦总线出现一次问题，则应用不刷新或重启情况下，便再也无法实现弹窗信息提示了。针对此类问题，可采用在根组件中编写一个弹窗组件，利用Vuex通知弹窗的显示与隐藏。通过这样的操作，可实现在复杂情况下出错概率低，以及即使出错也可以再次操作的目的，但使用此方案就和Vue框架强耦合了，一旦脱离Vue框架就无法使用。

针对平衡用户体验与设计思想间冲突的需求，本申请通过分离出一个即插即用的弹窗插件来帮助提升用户体验；另外，所有的弹窗逻辑均集中在插件中，实现解耦可重用，同时在用户频繁触发提示时也能不会遮盖，同时提供了丰富的自定义方法以自定义弹窗，使得所有使用的方案只需稍作修改就可以在任何主流框架中使用。

实施例一

本实施例提出一种基于VUE的通用页面通知弹窗插件生成方法，用于克服现有技术中存在的问题，实现该弹窗逻辑的结构均集中布局在插件中，可实现解耦和重复利用。

具体的，该插件的构建方法如图1所示，包括以下步骤：

步骤1、根据需求创建用于存放插件注册主文件和基础组件文件的文件夹；

步骤2、在基础组件文件中编写一个基础弹窗组件，并通过暴露自定义组件属性的方式，为后续的需求提供显示消息属性的依据；

步骤3、在插件注册主文件中预设具有添加全局方法的信息对象，并创建自渲染组件；其中，所述添加全局方法在实现调用时，涉及两个参数；所述两个参数中的第一个参数为实例对象，第二个参数为全局选项；

步骤4、实例化创建的自渲染组件，并放进一个实例数组中，根据所述实例数组中已有的实例为其指定出现位置以避免弹窗重叠；

步骤5、预设实例化对象的生命周期，以及过渡状态的事件及属性变化；所述生命周期包括：创建状态、保持状态和销毁状态。

步骤6、导出生成的具有添加全局方法的信息对象；

步骤7、将步骤6中导出的信息对象置于项目中，实现通用插件的引入。

实施例二

在实施例一基础上的进一步实施例中，在WEB技术的前提下，使用Vue框架创建一个可重复使用的通用页面通知弹窗组件，随后将组件通过Vue plugin install的方式注册成为插件，并在插件注册方法中暴露其自定义属性。为了便于后续的使用，向Vue实例注入一个调用方法$message，并在调用方法内部实例化组件、注入属性值、计算组件出现位置以及实现完整的生命周期。最后，使用Vue.use使用插件便可用一个$message实例方法随时随处调用弹窗进行通知了。

具体的，如图2所示，使用Vue框架创建一个可重复使用的通用页面通知弹窗组件的步骤如下：

步骤1、新建一个文件夹并在其中创建index.js及message.vue文件。

步骤2、在message.vue文件中编写一个普通弹窗组件，并通过Vue组件的props暴露自定义组件属性，用于自定义生成的弹窗的显示消息等属性。

步骤3、在index.js中定义一个MESSAGE对象并使其具有install方法，方法中第一个参数为Vue实例，第二个参数为全局选项。根据自己需要在install方法内自定义和初始化全局选项参数，并使用Vue.extend及其render方法创建自渲染组件。

步骤4、实例化Vue.extend创建的自渲染组件，将其放进一个实例数组中，并根据数组中已有的实例为其指定出现位置以避免弹窗重叠。

步骤5、为创建的实例指定其生命周期，包含创建、保持、销毁状态，分别指定三种状态及其过渡状态的事件及属性变化。

步骤6、使用module.exports导出MESSAGE对象。

步骤7、将文件夹导入Vue项目中，在Vue项目mian.js中引入刚刚写好的index.js文件，引入插件，从而实现通用页面通知弹窗的信息提示功能。

实施例三

在实施例一基础上的进一步实施例中，实际项目应用中弹窗创建的过程进一步包括以下步骤：

步骤A、调用插件中的组件自渲染方法，并将实例放入数组计算其出现的位置；

步骤B、弹窗组件创建，执行实例化对象生命周期的方法，制定实例化对象的内容、创建动画，以及将弹窗组件绑定至文档对象模型上；

步骤C、在预设时间内显示弹窗中的信息至用户端的可视化界面；

步骤D、超过弹窗预设的显示时间时，执行销毁生命周期中的方法，销毁弹窗组件。

在进一步的实施例中，在以Vue框架为开发基础的过程中，在进行插件构建并引入项目后，在main.js中只需使用Vue.use(message, {globalOpts})引入插件，便可以应用index.js中自定义的全局属性而不需要在使用弹窗时重复定义。而创建弹窗只需要在任意逻辑提示处使用this.$message({options})调用插件，其中options为message.vue中自定义的属性。

进一步的，优选实施例中，弹窗的创建过程如下：

步骤a、调用插件中的Vue.extend及其render方法进行组件自渲染，实现插件中的组件自渲染方法，生成弹窗实例，并将弹窗实例放入数组并计算其出现的位置；优选实施例中，通过调用Vue的install组件注册函数，向其实例内部注入一个自定义的弹窗生成函数message，其中的install函数会将函数名加前缀$后绑定在Vue实例上，之后通过使用Vue实例上的$message函数，即this.$message({options})来生成弹窗；

步骤b、弹窗组件创建，执行创建生命周期中的方法，主要为制定其内容、创建动画并将组件绑定到DOM上；

步骤c、弹窗组件创建完毕后，在预设时间内显示弹窗中的信息至用户端的可视化界面；

步骤d、判断弹窗组件的显示时间是否超过预设值，当判断结果为超过弹窗预设的显示时间时，执行销毁生命周期中的方法，销毁弹窗组件。优选实施例中，执行销毁生命周期中方法主要为创建消失动画，动画结束后将组件从DOM上移除，并在最后对创建的组件进行销毁。

本实施例可以看出插件开发完毕后已完全屏蔽了所有的业务逻辑，开发者只需要一行代码即可以完成组件创建、显示、销毁的一系列流程，实现了业务解耦、组件重用，可以在开发人员的非必要开发时间大幅缩短的同时保证良好的页面交互性。

实施例四

在实施例一基础上的进一步实施例中，为了实现实施例一中提出的一种基于VUE的通用页面通知弹窗插件生成方法，本实施例提出一种基于VUE的通用页面通知弹窗插件生成系统，具体的，该系统包括：

文件夹，被设置为根据需求存放插件注册主文件和基础组件文件；

插件注册主文件，包括基础弹窗组件，被设置为通过props对象暴露自定义组件属性，用于为弹窗组件实例提供自定义属性；

基础组件文件，包括具有添加全局方法的信息对象，被设置为根据需求在添加全局方法内自定义实例属性和初始化全局选项参数，并创建自渲染组件；

数组，被设置为存放实例化组件的容器。

在进一步的实施例中，通用页面通知弹窗插件生成系统在实现通用页面通知弹窗插件生成方法时，首先在所述文件夹中创建index.js插件注册主文件和message.vue基础组件文件；其次，在message.vue基础组件文件中编写一个基础弹窗组件，并通过Vue组件的props暴露自定义组件属性，为弹窗组件实例提供自定义属性；再次，在index.js插件注册主文件中定义一个MESSAGE对象并使其具有install全局插件注册方法，并根据自己需要在install全局插件注册方法内自定义和初始化全局选项参数，并使用Vue.extend及其render方法创建自渲染组件；从次，实例化Vue.extend创建的自渲染组件，将其放进一个实例数组中，并根据数组中已有的实例为其指定出现位置；最后，预设实例化对象的生命周期，以及过渡状态的事件及属性变化，并在完成后使用module.exports导出MESSAGE对象，置于项目中，实现通用插件的引入。

综上，相比于现有技术中提出的针对性编写单一弹窗组件，以及在根组件中编写一个弹窗组件，利用Vuex通知弹窗的显示与隐藏的方式，本申请通过开发完成的插件完成任意通知信息的弹窗显示，调用简单，大大减少了不必要的重复代码，并且提供了同等程度上的页面友好度；另外，于大型项目而言，去耦合操作可以更好的实现模块化开发也更容易查找弹窗模块中的问题，同时也便于多人开发时风格统一。

如上所述，尽管参照特定的优选实施例已经表示和表述了本发明，但其不得解释为对本发明自身的限制。在不脱离所附权利要求定义的本发明的精神和范围前提下，可对其在形式上和细节上做出各种变化。

Claims (10)

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的通用页面通知弹窗插件生成方法，其特征在于，

实际项目应用中弹窗创建的过程进一步包括以下步骤：

步骤a、调用插件中的组件自渲染方法并生成弹窗实例，并将实例放入数组计算其出现的位置；

步骤b、弹窗组件创建，执行实例化对象生命周期的方法，制定实例化对象的内容、创建动画，以及将弹窗组件绑定至文档对象模型上；

步骤c、在预设时间内显示弹窗中的信息至用户端的可视化界面；

步骤d、超过弹窗预设的显示时间时，执行销毁生命周期中的方法，销毁弹窗组件。

8.根据权利要求7所述的一种基于VUE的通用页面通知弹窗插件生成方法，其特征在于，

所述步骤d在实现销毁组件时，进一步为创建消失动画，当动画结束后，将弹窗组件从文档对象模型上移除并销毁。

9.一种基于VUE的通用页面通知弹窗插件生成系统，用于实现权利要求1-8任意一项方法，其特征在于，具体包括：

文件夹，被设置为根据需求存放插件注册主文件和基础组件文件；

基础组件文件，包括基础弹窗组件，被设置为通过props对象暴露自定义组件属性，用于为弹窗组件实例提供自定义属性；

插件注册主文件，包括具有添加全局方法的信息对象，被设置为根据需求在添加全局方法内自定义实例属性和初始化全局选项参数，并创建自渲染组件；

数组，被设置为存放实例化组件的容器。

10.根据权利要求9所述的一种基于VUE的通用页面通知弹窗插件生成系统，其特征在于，

通用页面通知弹窗插件生成系统在实现通用页面通知弹窗插件生成方法时，首先在所述文件夹中创建index.js插件注册主文件和message.vue基础组件文件；其次，在message.vue基础组件文件中编写一个基础弹窗组件，并通过Vue组件的props暴露自定义组件属性，为弹窗组件实例提供自定义属性；再次，在index.js插件注册主文件中定义一个MESSAGE对象并使其具有install插件注册方法，并根据自己需要在install插件注册方法内自定义和初始化全局选项参数，并使用Vue.extend及其render方法创建自渲染组件；从次，实例化Vue.extend创建的自渲染组件，将其放进一个实例数组中，并根据数组中已有的实例为其指定出现位置；最后，预设实例化对象的生命周期，以及过渡状态的事件及属性变化，并在完成后使用module.exports导出MESSAGE对象，置于项目中，实现通用插件的引入。

Images