在原生app中，通过监听物理回退键可以对当前弹出层进行关闭，再次点击会回退到上一个页面，这次介绍一下vue中如何实现类似的效果
实现这一效果所需要的原料
- 弹出层
这里的弹出层已mint-ui的pupup为例子
通过一个cell来点开弹出层
<mt-cell title="区域" is-link value="" v-tap="{ methods : open ,type:'del_area'}"> <span>{{showInfo.del_area}}</span> </mt-cell>
<mt-popup v-model="del_area" position="bottom"> ...</mt-popup>//弹出层
data(){ return{ del_area:false， cur_type:''//存储当前弹出层的值 } }
此处v-model中的值是关键，控制弹出层的显示和隐藏，data中默认初始化为false
2.相关函数和计算属性
函数:open
open(params){ this[params.type]=true this.cur_type = params.type//将当前弹出层的属性保存 }
计算属性:fixedkey
//若当前弹出层打开，保存当前弹出层的v-model,否则移除 fixedkey(){ if(this[this.cur_type]){ this.savePopup(this.cur_type) }else{ this.removePopup() } return this[this.cur_type] }
此处的savePopup(value)和removePopup()全局通用，写在vue自定义插件中，弹出的值存入sessionStorage中的数组中
3.vue自定义插件模块
export default{ install(Vue){ // 向Vue对象上添加方法，保存popup值 Vue.prototype.savePopup = (value) => { //如果存在-新增，否则-创建 if(sessionStorage.getItem('popupArr')){ let tempArr = JSON.parse(sessionStorage.getItem('popupArr')) tempArr.push(value) sessionStorage.setItem('popupArr',JSON.stringify(tempArr)) }else{ let arr = [value] sessionStorage.setItem('popupArr',JSON.stringify(arr)) } }, Vue.prototype.removePopup = () =>{ if(sessionStorage.getItem('popupArr')){ let tempArr = JSON.parse(sessionStorage.getItem('popupArr')) tempArr.pop() sessionStorage.setItem('popupArr',JSON.stringify(tempArr)) } } } }
4.组件内路由钩子
beforeRouteLeave (to, from, next) { if(sessionStorage.getItem('popupArr')){ let tempArr = JSON.parse(sessionStorage.getItem('popupArr')) if(tempArr.length>0){ let cur = tempArr.pop() this[cur] = false sessionStorage.setItem('popupArr',JSON.stringify(tempArr)) next(false) }else{ next() } }else{ next() } }
技术栈：vue+vue-router+mint-ui 这个应该是比较偏僻的需求了，描述不周，敬请见谅
