微客导航 » 文章资讯 » vue项目中监听手机物理返回键的实现

vue项目中监听手机物理返回键的实现

2023-08-02 21:31:04 307

背景：项目中有一个场景要监听android手机物理返回键，但是app和js的中间件又没提供这个事件的监听，只能百度纯js实现了

第一步：

xback.js

;!function(pkg,undefined){
varSTATE='x-back';
varelement;
varonPopState=function(event){
event.state===STATE&&fire();
}
varrecord=function(state){
history.pushState(state,null,location.href);
}
varfire=function(){
varevent=document.createEvent('Events');
event.initEvent(STATE,false,false);
element.dispatchEvent(event);
}
varlisten=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可以参考我另外的一篇文章：https://www.nhooo.com/article/178777.htm

第三步：

监听返回键事件

methods:{
//JavaScript监听手机物理返回键
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()
})
},
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue项目中监听手机物理返回键的实现

热门推荐

随机推荐