业务场景如下图：
页面出现提示框：
点击确定，隐藏上面的弹出框， 继续弹出提示：
点击确定隐藏上面的弹出框，继续弹出下面提示：
点击确定隐藏上面的弹出框，继续弹出下面提示：
点击确定，跳转页面
- 上面有 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 () { ................... }
} ) ;