这篇文章给大家分享的是有关vue项目中如何实现监听手机物理返回键的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
第一步:
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可以参考我另外的一篇文章:https://www.jb51.net/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() }) }, }
感谢各位的阅读!关于“vue项目中如何实现监听手机物理返回键”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
当前文章:vue项目中如何实现监听手机物理返回键-创新互联
当前地址:https://www.cdcxhl.com/article10/cspedo.html
成都网站建设公司_创新互联,为您提供域名注册、网站内链、品牌网站制作、搜索引擎优化、标签优化、手机网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联