在原生app中凡纳，通過監(jiān)聽物理回退鍵可以對當(dāng)前彈出層進(jìn)行關(guān)閉窃植，再次點擊會回退到上一個頁面，這次介紹一下vue中如何實現(xiàn)類似的效果
實現(xiàn)這一效果所需要的原料
- 彈出層
這里的彈出層已mint-ui的pupup為例子
通過一個cell來點開彈出層
<mt-cell title="區(qū)域" 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:''//存儲當(dāng)前彈出層的值 } }
此處v-model中的值是關(guān)鍵撕瞧，控制彈出層的顯示和隱藏陵叽，data中默認(rèn)初始化為false
2.相關(guān)函數(shù)和計算屬性
函數(shù):open
open(params){ this[params.type]=true this.cur_type = params.type//將當(dāng)前彈出層的屬性保存 }
計算屬性:fixedkey
//若當(dāng)前彈出層打開，保存當(dāng)前彈出層的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中的數(shù)組中
3.vue自定義插件模塊
export default{ install(Vue){ // 向Vue對象上添加方法，保存popup值 Vue.prototype.savePopup = (value) => { //如果存在-新增页畦，否則-創(chuàng)建 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.組件內(nèi)路由鉤子
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() } }
技術(shù)棧：vue+vue-router+mint-ui 這個應(yīng)該是比較偏僻的需求了胖替，描述不周，敬請見諒
