vue 手机物理监听键+退出提示代码_JavaScript

vue 手机物理监听键+退出提示代码

2021-09-22 17:18在咕噜上敲打 JavaScript

这篇文章主要介绍了vue 手机物理监听键+退出提示代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

我就废话不多说了，大家还是直接看代码吧~

				?

									    <script>

									    //Toast 这些都是在网上粘的别人的。但是找不到出处了，大佬见谅。

									    function Toast(msg,duration){

									        duration=isNaN(duration)?3000:duration;

									        var m = document.createElement('div');

									        m.innerHTML = msg;

									        m.style.cssText="width: 60%;min-width: 150px;opacity: 0.7;height: 30px;color: rgb(255, 255, 255);line-height: 30px;text-align: center;border-radius: 5px;position: fixed;bottom: 70px;left: 20%;z-index: 999999;background: rgb(0, 0, 0);font-size: 12px;";

									        document.body.appendChild(m);

									        setTimeout(function() {

									            var d = 0.5;

									            m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';

									            m.style.opacity = '0';

									            setTimeout(function() { document.body.removeChild(m) }, d * 1000);

									        }, duration);

									    }

									    var time = '' // 用来存上一次按键时间；

									    setTimeout(() => {

									        // 监听返回按钮

									        document.addEventListener('backbutton', function (evt) {

									            console.log('监听按钮');

									            var url = location.hash.split('/')[1];

									            if (url === 'home' ) {// 处于app首页,满足退出app操作

									                console.log('满足条件')

									                if (new Date() - time < 2000) {// 小于2s,退出程序

									                    navigator.app.exitApp();

									                } else {  // 大于2s，重置时间戳，

									                    time = new Date();

									                    Toast('再次点击退出', 2000);

									                }

									                return;

									            } else {

									                console.log('不满足条件')

									                history.back(); // 不满足退出操作，，返回上一页

									            }

									        }, false);

									    }, 10)

									</script>

代码很简单，逻辑也不是很复杂。但是要说一下为什么要用setTime( )。

我是在vue的index.html里面加的这些代码。在没有添加setTime（）的时候不知道为啥他不执行，检查好几遍也没有错。最后请教的大佬，他也不知道为什么。/笑哭不过能用了。

之前也遇到了一个关闭手机端虚拟键盘的操作。他就是不执行.。

document.activeElement.blur()

后来也是用settime( )解决的。

补充知识：Vue 单页面处理手机返回键问题

在用Vue开发单页面App时候，有时会遇到要处理返回按键的逻辑，让它不是返回默认的上一级页面，而是转到指定的页面。百度了查了一下，网上给的方法基本都是通过监听“popstate”，并不能完美解决。后来想到了Router的“导航守卫”，在离开时进行处理一下即可。话不多说，直接上例子：

				?

									beforeRouteLeave (to, from, next) {

									   if(this.success){

									    next({path:'/home'});//重定向到指定路径

									   }else{

									    next()

									   }

									 }