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

 

總的來說，這種情況都是通過隊列來實現的，具體操作可以根據實際情況，封裝一些工具函數或方法等