vue項目中監(jiān)聽手機物理返回鍵的實現(xiàn)
更新時間：2020年01月18日 14:47:39 作者：竿牘
這篇文章主要介紹了vue項目中監(jiān)聽手機物理返回鍵的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
背景：項目中有一個場景要監(jiān)聽android手機物理返回鍵，但是app和js的中間件又沒提供這個事件的監(jiān)聽，只能百度純js實現(xiàn)了
第一步：
xback.js
;!function(pkg, undefined){
var STATE = 'x-back';
var element;
var onPopState = function(event){
event.state === STATE && fire();
}
var record = function(state){
history.pushState(state, null, location.href);
}
var fire = function(){
var event = document.createEvent('Events');
event.initEvent(STATE, false, false);
element.dispatchEvent(event);
}
var listen = function(listener){
element.addEventListener(STATE, listener, false);
}
;!function(){
element = document.createElement('span');
window.addEventListener('popstate', onPopState);
this.listen = listen;
this.record = record(STATE);
record(STATE);
}.call(window[pkg] = window[pkg] || {});
}('XBack');
第二步：
加載xback.js文件
<remote-script src="../js/xback.js" @load="loadXBack"></remote-script>
自定義組件remote-script可以參考我另外的一篇文章：http://m.fzitv.net/article/178777.htm
第三步：
監(jiān)聽返回鍵事件
methods: {
// JavaScript監(jiān)聽手機物理返回鍵
loadXBack () {
window.XBack.listen(() => {
this.dialog = this.$createDialog({
type: 'confirm',
content: `確定返回嗎？`,
confirmButton: {
text: '確定',
active: true,
disabled: false
},
cancelButton: {
text: '取消',
active: false,
disabled: false
},
onConfirm: () => {
this.dialog.hide()
this.close()
},
onCancel: () => {
this.dialog.hide()
window.history.pushState('x-back', null, window.location.href)
}
})
this.dialog.show()
})
},
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue Router是Vue提供的路由管理器,將組件與路由一一對應(yīng)起來,這種對應(yīng)關(guān)系就路由,這篇文章主要介紹了Vue中vue-router路由使用,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了uni-app的開發(fā)環(huán)境，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue3子組件數(shù)據(jù)無法更新問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue表單數(shù)據(jù)修改與刪除功能實現(xiàn)
本文通過實例代碼介紹了Vue表單數(shù)據(jù)修改與刪除功能實現(xiàn),結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友跟隨小編一起看看吧2023-10-10
使用van-picker?動態(tài)設(shè)置當(dāng)前選中項
這篇文章主要介紹了使用van-picker?動態(tài)設(shè)置當(dāng)前選中項方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在開發(fā)Web應(yīng)用程序時,表格數(shù)據(jù)的展示和操作是非常常見的需求之一,特別是在處理表格中的復(fù)選框選擇時,我們經(jīng)常需要實現(xiàn)全選、反選等功能,這篇文章將帶你深入了解如何在Vue.js中實現(xiàn)對二維數(shù)組數(shù)據(jù)的全選和反選功能,需要的朋友可以參考下2024-09-09
路由傳參主要有兩種方式一種是路徑傳參一種是參數(shù)傳遞,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
vuex頁面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案
這篇文章主要介紹了vuex頁面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案，幫助大家更好的使用vue框架，感興趣的朋友可以了解下2020-12-12
在登錄頁面需要啟動向右滑塊驗證功能,遇到這樣的需求怎么實現(xiàn)呢,下面小編通過示例代碼給大家分享Vue3滑動到最右驗證功能實現(xiàn),感興趣的朋友一起看看吧2024-06-06
vue?Router(v3.x)?路由傳參的三種方式場景分析
vue?路由傳參的使用場景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時，攜帶參數(shù)跳轉(zhuǎn)，傳參方式可劃分為?params?傳參和?query?傳參，而?params?傳參又可分為在?url?中顯示參數(shù)和不顯示參數(shù)兩種方式，這就是vue路由傳參的三種方式，感興趣的朋友跟隨小編一起看看吧2023-07-07