在前端写一个弹窗可能很简单，那如果同时有多个弹窗呢
这样的话就要考虑弹窗的展示问题，肯定是不能叠加在一起的，这时候就要通过队列（先进先出）来展示
思路就是根据队列来实现，至于具体的实现方式，可以在项目中灵活运用
在vue中可以通过vuex存储队列，用watch方法来监听队列的变化
举个??
1. 在mutations里写弹窗展示和隐藏的同步操作方法
[Types.M_SERVICE_CHAT_SET_ACCEPT] (state, payload) { // 在接收到转接请求的时候，启用队列
state.acceptSession.show = true // 弹窗展示
state.acceptSession.data = { ...payload}
},
[Types.M_SERVICE_CHAT_RESET_ACCEPT] (state, payload) {
state.acceptSession.show = false // 弹窗隐藏
if(state.dialogQueue.length) { // 队列不为空，弹窗关闭出队
state.dialogQueue.shift()
}
2. 在state里存储弹窗队列
state = {
dialogQueue: []
}
3. 弹窗陆续入队
state.dialogQueue.push(results) // 入队
4. 监听队列的变化，出队依次展示弹窗
// 页面获取队列 computed: { ...mapState({ dialogQueue: state => state.dialogQueue, }), }, watch: { // 页面监听队列 ‘dialogQueue‘:{// 监测队列的变化 handler:function(val){ if(val.length){ console.log(val,val.length,val[0].doctor_name) this.showDialog({...val[0]}) // 有变化就出队 } }, deep: true } },
总的来说，这种情况都是通过队列来实现的，具体操作可以根据实际情况，封装一些工具函数或方法等
原文：https://www.cnblogs.com/leiting/p/11811144.html