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

2024-10-24 02:37:04

前言

由于业务需要，需要在封装的弹窗组件中引入定时器实现倒计时效果，但是如果同时触发两个弹窗，就会导致计时器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的toast弹窗组件实例详解

相信普通的vue组件大家都会写, 定义 -> 引入 -> 注册 -> 使用 ,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): 0. 轻量 --一个组件小于 1Kib (实际打包完不到0.8k) 1.一般都是多处使用 --需要解决每个页面重复引用+注册 1.一般都是跟js交互的 --无需在 <template> 里面写 <toast :show="true" text="弹窗消息
关于vue.js弹窗组件的知识点总结

首先在开发时需要考虑以下三点: 1.进入和弹出的动画效果. 2.z-index 的控制 3.overlay 遮盖层关于动画 vue 对于动画的处理相对简单,给组件加入css transition 动画即可 <template> <div class="modal" transition="modal-scale">  </div> </template> <script&g
vue.extend实现alert模态框弹窗组件

本文通过Vue.extend创建组件构造器的方法写弹窗组件,供大家参考,具体内容如下 alert.js文件代码 import Vue from 'vue' // 创建组件构造器 const alertHonor = Vue.extend(require('./alert.vue')); var currentMsg = {callback:function(){ }} export default function(options){ var alertComponent = new alert
很棒的vue弹窗组件

弹窗是一个项目必备的复用利器,所以封装起来,保证项目ui一致,是很有必要的.学了一段时间vue,想想还是用vue写一下吧.用的很小白,但是会写出来了,说明我也有进步一丢丢了.继续加油-. 代码贴图如下,样式比较丑,不要介意- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ys-vue-modal-component
在vue中封装的弹窗组件使用队列模式实现方法

前言由于业务需要,需要在封装的弹窗组件中引入定时器实现倒计时效果,但是如果同时触发两个弹窗,就会导致计时器bug,前一个弹窗的定时器没有被清除,倒计时就会错乱,此时想到的解决办法就是采用队列模式,将每一个需要的弹窗存到队列中,依次的将弹窗展示出来,同时清除定时器什么是队列队列(Queue)是先进先出(FIFO, First-In-First-Out)的线性表.在具体应用中通常用链表或者数组来实现.队列只允许在尾部进行插入操作(入队 enqueue),在头部进行删除操作(出队 dequeue
vue中封装echarts公共组件过程

目录 1.安装echarts 2.在mian.js中全局引入 3.下面开始封装图表 4.接下来只需要在需要显示图表的地方引入Echart.vue 定义图表公共样式是为了统一同一网站各页面图表的基础样式baseOption.js(轴线.区域.色系.字体),统一封装后页面需要直接引入,传入所需参即可覆盖基础样式. 以下示例封装图表组件Echart.vue. 1.安装echarts npm install echarts --save npm install lodash --save // 若已安装
Vue v-model组件封装(类似弹窗组件)

v-model是vue的一个语法糖,限制在input和textarea等这些表单元素中,官网所给的例子也是仅限于表单组件 Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` <input type="checkbox" v-bind:checked="checked" v-on
Vue中封装input组件的实例详解

Vue中封装input组件最近有点忙不过来脱了很久,没有更新抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板码友们可以更具自己的实际项目添加需要的参数我的项目中的UI图是这样的代码如下子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>
在vue中封装可复用的组件方法

本次封装的组件以toast组件为例以前使用移动端ui插件时,通过一句代码比如 $.toast( ' 需要显示的内容 ' ),从而在页面上展示这段文字,并在一定时间后消失. 现在我们也尝试自己封装toast组件. 准备工作:vue-cli脚手架工程先看一下涉及到的文件目录截图: 这次的封装主要涉及的文件是Toast.vue toast.js Hello.vue,主要思路如下: ① Toast.vue是我们要使用的toast组件: ② toast.js里面用Vue.extend()扩展一个组件构
vue extend+promise封装全局弹窗组件

本文实例为大家分享了vue extend+promise封装全局弹窗组件的具体代码,供大家参考,具体内容如下因为项目没有引入第三方UI库,所以所有的公共组件都需要自己封装现在需要一个全局的弹窗,要有promise异步处理实现后的效果 // components/confirm文件 <template> <div class="popup-wrap" v-if="showPopup"> <div class="p
Vue中添加手机验证码组件功能操作方法

什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 写在前面: 今天要实现的功能是在完善个人信息页面(vue)中添加手机验证码组件,当用户点击手机选项时,弹出获取验证码组件,完成验证手机的功能: 这里考虑到功能的复用,我把当前弹出手机验证码的操作放在了单独的组件中: <template > <div>
Vue 实现一个命令式弹窗组件功能

前言在日常工作中弹窗组件是很常用的组件,但用得多还是别人的,空闲时间就自己来简单实现一个弹窗组件涉及知识点:extend.$mount.$el 使用方式: this.$Confirm({ title:'自定义标题' }).then(res=>{ console.log(res) }) 目录结构 index.vue:组件布局.样式.交互逻辑 index.js:挂载组件.暴露方法知识点在此之前,了解下涉及的知识点 1. extend 使用这个api,可以将引入的vue组件变成vue构造函数,
在vue中使用防抖函数组件操作

初级 1.先写好防抖函数 /** * @desc 防抖函数 * @param {需要防抖的函数} func * @param {延迟时间} wait * @param {是否立即执行} immediate */ export function debounce(func, wait, immediate) { let timeout return function(...args) { let context = this if (timeout) clearTimeout(timeout) i
vue之封装多个组件调用同一接口的案例

背景:项目中有多个组件调用同一接口,为提高代码可维护性,需要封装公共方法直接return 接口调用的结果 export function getAll() { let all = []; let opt = { method: 'get', url: 'all/teacher', success: res => { all = res.data.value || []; }, fail: err => { tipInfo(err.data.desc, '提示', false, 'warnin

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

相关推荐

随机推荐