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 手机物理监听键+退出提示)