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

前端  /  管理员 发布于 2年前   365

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

第一步：

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可以参考我另外的一篇文章：/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 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)