vue中前端弹窗队列展示

在前端写一个弹窗可能很简单，那如果同时有多个弹窗呢

这样的话就要考虑弹窗的展示问题，肯定是不能叠加在一起的，这时候就要通过队列（先进先出）来展示

思路就是根据队列来实现，至于具体的实现方式，可以在项目中灵活运用

在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
    }
  },

 

总的来说，这种情况都是通过队列来实现的，具体操作可以根据实际情况，封装一些工具函数或方法等