業務場景如下圖：

頁面出現提示框：　　　　　　　　　　　　 ??

?

點擊確定，隱藏上面的彈出框，?繼續彈出提示：?

?

點擊確定隱藏上面的彈出框，繼續彈出下面提示：

?

點擊確定隱藏上面的彈出框，繼續彈出下面提示：

?

?

點擊確定，跳轉頁面

?

• 上面有 2個 按鈕的提示框，如果點擊取消，那么就會返回，不會執行往下的操作
• 提示框的按鈕的個數可能只有一個‘確定’ 按鈕 ， 可能 2 個 ， 根據業務而定
• 如果這樣的需求很多，可能不止4個彈出框，可能就只有一個提示框，根據業務而定

?

?

根據 ui 的 分析，決定將上面的提示框封裝成一個組件 ?prompts.vue?

將組件放置于app.vue 里面 注冊，因為該組件經常被用到?

?

組件用到的數據，用vuex 保存 ， 需要提示，只要提交 vuex 的?mutations 即可

組件用到的數據?prompts {

　　isShow : false , 是否顯示提示框 默認false

　　msgs : [ {

　　　　msg : ' ' , //需要提示的信息

　　　　button : {

　　　　　　confirm : '確認'?

　　　　　　cancel : '取消'? // 如果有2個按鈕

　　　　}

　　} ]

}

?

prompts.vue 組件，實現的關鍵：

彈出框的提示語，永遠都是提示?msgs ?數組里面的第一個元素 ：?{{ prompts.msgs[0] && prompts.msgs[0].msg }}?

給確定按鈕綁定 @click 事件，事件里面 判斷?msgs ?數組的長度是不是大于1

　　是 ----> ? ?

將?msgs里面的第一個元素刪除 ，將提示框隱藏，提交 vuex ，setTimeout 300 毫秒后，繼續彈出提示框，此時，彈出的內容就是原來數組的第二個元素的msg ， 點擊確定，就會循環操作，一直到數組的長度為1 ?

　　否 ----> ?

隱藏提示框，并且初始化提示框，判斷 子組件是否實現回調函數，是就調用

?

?

彈出提示框調用方法：mutations 里面的?UPDATE_PROMPTS 方法??

vm.$store.commit('UPDATE_PROMPTS' , {
　　msgs : [

　　　　{ msg : ' 提示1 ' , ?button : {confirm : ' 確定 ' }?} ,?

　　　　{ msg : ' 提示2 ' , ?button : {confirm : ' 確定 ' , cancel : ' 取消?' ?}?} ,?

　　　　{ msg : ' 提示3 ' , ?button : {confirm : ' 確定 ' ?}?} ,

　　　　.....................

　　] ,
　　confirmCallBack : function () {　........................?} ,

　　cancelCallBack : function () { ................... }
} ) ;

?

轉載于:https://www.cnblogs.com/vs1435/p/7054444.html

總結

以上是生活随笔為你收集整理的POS开发问题 - 多个弹出框的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。