vue項(xiàng)目中監(jiān)聽手機(jī)物理返回鍵的實(shí)現(xiàn)
背景:項(xiàng)目中有一個(gè)場景要監(jiān)聽android手機(jī)物理返回鍵,但是app和js的中間件又沒提供這個(gè)事件的監(jiān)聽,只能百度純js實(shí)現(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://www.dhdzp.com/article/178777.htm
第三步:
監(jiān)聽返回鍵事件
methods: {
// JavaScript監(jiān)聽手機(jī)物理返回鍵
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表單數(shù)據(jù)修改與刪除功能實(shí)現(xiàn)
本文通過實(shí)例代碼介紹了Vue表單數(shù)據(jù)修改與刪除功能實(shí)現(xiàn),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友跟隨小編一起看看吧2023-10-10
使用van-picker?動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)
這篇文章主要介紹了使用van-picker?動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
Vue實(shí)現(xiàn)二維碼數(shù)組的全選與反選功能
在開發(fā)Web應(yīng)用程序時(shí),表格數(shù)據(jù)的展示和操作是非常常見的需求之一,特別是在處理表格中的復(fù)選框選擇時(shí),我們經(jīng)常需要實(shí)現(xiàn)全選、反選等功能,這篇文章將帶你深入了解如何在Vue.js中實(shí)現(xiàn)對二維數(shù)組數(shù)據(jù)的全選和反選功能,需要的朋友可以參考下2024-09-09
vuex頁面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案
這篇文章主要介紹了vuex頁面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案,幫助大家更好的使用vue框架,感興趣的朋友可以了解下2020-12-12
Vue3滑動(dòng)到最右驗(yàn)證功能實(shí)現(xiàn)
在登錄頁面需要啟動(dòng)向右滑塊驗(yàn)證功能,遇到這樣的需求怎么實(shí)現(xiàn)呢,下面小編通過示例代碼給大家分享Vue3滑動(dòng)到最右驗(yàn)證功能實(shí)現(xiàn),感興趣的朋友一起看看吧2024-06-06
vue?Router(v3.x)?路由傳參的三種方式場景分析
vue?路由傳參的使用場景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),傳參方式可劃分為?params?傳參和?query?傳參,而?params?傳參又可分為在?url?中顯示參數(shù)和不顯示參數(shù)兩種方式,這就是vue路由傳參的三種方式,感興趣的朋友跟隨小編一起看看吧2023-07-07

