溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了在vue中如何實現封裝的彈窗組件使用隊列模式，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
前言
由于業務需要，需要在封裝的彈窗組件中引入定時器實現倒計時效果，但是如果同時觸發兩個彈窗，就會導致計時器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中如何實現封裝的彈窗組件使用隊列模式的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
