在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 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
phpize的深入理解
2013/06/03 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
详解PHP中的Traits
2015/07/29 PHP
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
详细介绍Python中的偏函数
2015/04/27 Python
python实现批量修改文件名代码
2017/09/10 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
中专生自我鉴定
2013/12/17 职场文书
大三学生入党思想汇报
2014/01/02 职场文书
婚礼答谢礼品
2015/01/20 职场文书
入党积极分子个人总结
2015/03/02 职场文书
期中考试后的感想
2015/08/07 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
mysql数据库入门第一步之创建表
2021/05/14 MySQL