POS开发问题 - 多个弹出框的实现

业务场景如下图：

页面出现提示框：　　　　　　　　　　　　   

 

点击确定，隐藏上面的弹出框， 继续弹出提示： 

 

点击确定隐藏上面的弹出框，继续弹出下面提示：

 

点击确定隐藏上面的弹出框，继续弹出下面提示：

 

 

点击确定，跳转页面

 

• 上面有 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 () { ................... }
} ) ;