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

业务场景如下图:

页面出现提示框:               POS开发问题 - 多个弹出框的实现_第1张图片

 

点击确定,隐藏上面的弹出框, 继续弹出提示: POS开发问题 - 多个弹出框的实现_第2张图片

 

点击确定隐藏上面的弹出框,继续弹出下面提示:POS开发问题 - 多个弹出框的实现_第3张图片

 

点击确定隐藏上面的弹出框,继续弹出下面提示:POS开发问题 - 多个弹出框的实现_第4张图片

 

 

点击确定,跳转页面

 

  • 上面有 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开发问题 - 多个弹出框的实现)