在vue中封装的弹窗组件使用队列模式实现方法


Posted in Javascript onJuly 23, 2020

前言

由于业务需要,需要在封装的弹窗组件中引入定时器实现倒计时效果,但是如果同时触发两个弹窗,就会导致计时器bug,前一个弹窗的定时器没有被清除,倒计时就会错乱,此时想到的解决办法就是采用队列模式,将每一个需要的弹窗存到队列中,依次的将弹窗展示出来,同时清除定时器

什么是队列

队列(Queue)是先进先出(FIFO, First-In-First-Out)的线性表。在具体应用中通常用链表或者数组来实现。队列只允许在尾部进行插入操作(入队 enqueue),在头部进行删除操作(出队 dequeue)。队列的操作方式和堆栈类似,唯一的区别在于队列只允许新数据在后端进行添加。

JavaScript实现队列的效果

function ArrayQueue(){ 
  var arr = []; 
    //入队操作 
  this.push = function(element){ 
    arr.push(element); 
    return true; 
  } 
    //出队操作 
  this.pop = function(){ 
    return arr.shift(); 
  } 
    //获取队首 
  this.getFront = function(){ 
    return arr[0]; 
  } 
    //获取队尾 
  this.getRear = function(){ 
    return arr[arr.length - 1] 
  } 
    //清空队列 
  this.clear = function(){ 
    arr = []; 
  } 
    //获取队长 
  this.size = function(){ 
    return length; 
  } 
}

和vue封装的弹窗组件使用

首先要配合组件封装队列要进行修改

class Queue {
 dataStore = []
 constructor(){
  this.dataStore=[]
 }
 enqueue(e) {
  this.dataStore.push(e)
  console.warn('入队',this.dataStore);
 }

 dequeue() {
  this.dataStore.shift()
  console.warn('出队',this.dataStore);
 }

 front() {
  console.log(this.dataStore,'front')
  return this.dataStore[0]()
 }
 select(){
  return this.dataStore[0]
 }

 back() {
  return this.dataStore[this.dataStore.length - 1]
 }

 isEmpty() {
  if (this.dataStore.length == 0) {
   return true
  }
  return false
 }

 toString() {
  return this.dataStore.join(',')
 }
}

export default Queue

在弹出第一个队列的时候需要自执行。

在你的封装组件的函数中引入这个队列,同时实例化这个队列,写入两个方法.

const pushDialog = (eventName) => {
 if (queue.isEmpty()) {
  queue.enqueue(eventName);
  openDialog();
 } else {
  queue.enqueue(eventName);
 }
}
const openDialog = () => {
 // 打开弹窗
 queue.front();
}

在安装的方法中将每一个弹窗加入队列中

在vue中封装的弹窗组件使用队列模式实现方法

需要注意的是,每个弹窗是要被销毁的,不然会导致方法重复。

举例在确认方法和定时器后怎么出队列和清空定时器

在vue中封装的弹窗组件使用队列模式实现方法

到此这篇关于在vue中封装的弹窗组件使用队列模式实现的文章就介绍到这了,更多相关vue 封装的弹窗组件队列模式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
js中arguments对象的深入理解
May 14 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 #Javascript
javascript递归函数定义和用法示例分析
Jul 22 #Javascript
简单了解vue 插值表达式Mustache
Jul 22 #Javascript
详解node.js 事件循环
Jul 22 #Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 #jQuery
详解vue中v-on事件监听指令的基本用法
Jul 22 #Javascript
使用vue实现通过变量动态拼接url
Jul 22 #Javascript
You might like
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
浅析php学习的路线图
2013/07/10 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
python3 xpath和requests应用详解
2020/03/06 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
Python更换pip源方法过程解析
2020/05/19 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
广告语设计及教案
2014/03/21 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书