vue Mobile Phone Physical Monitoring Key + Exit Prompt Code

I won't talk too much, let's just look at the code ~

	<script>
	//Toast  These are other people's stickers on the Internet. But can't find the source, big brother forgive me. 
	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 = '' //  Used to store 1 Second key time; 
	setTimeout(() => {
		//  Listen back button 
		document.addEventListener('backbutton', function (evt) {
			console.log(' Monitor button ');
			var url = location.hash.split('/')[1];
			if (url === 'home' ) {//  Be in app Home page , Satisfy exit app Operation 
				console.log(' Satisfy the condition ')
				if (new Date() - time < 2000) {//  Less than 2s, Exit program 
					navigator.app.exitApp();
				} else {  //  Greater than 2s Reset the timestamp, 
					time = new Date();
					Toast(' Click Exit Again ', 2000);
				}
				return;
			} else {
				console.log(' Unsatisfied condition ')
				history.back(); //  The exit operation is not satisfied, return to 1 Page 
			}
		}, false);
	}, 10)
</script>

The code is simple and the logic is not very complicated. But let's say why we use setTime ().

I added these codes in index. html of vue. When setTime () was not added, I don't know why he didn't execute it, and there is nothing wrong with checking it several times. Finally, the big brother who asked for advice didn't know why. /Laughing and crying can't work.

I also encountered an operation to turn off the virtual keyboard on the mobile phone before. He just doesn't execute..

document.activeElement.blur()

Later, it was also solved with settime ().

Additional knowledge: Vue handles the return key of mobile phone on a single page

When developing a single-page App with Vue, you sometimes encounter the logic to handle the return button, so that it does not return to the default level 1 page, but goes to the specified page. Baidu checked it for 1 time, and the methods given online are basically by monitoring "popstate", which cannot be solved perfectly. Later, I thought of Router's "Navigation Guard", and I can deal with it once when I leave. Don't say much, go directly to the example:

beforeRouteLeave (to, from, next) {
   if(this.success){
    next({path:'/home'});// Redirect to the specified path 
   }else{
    next()
   }
 }

Just redirect it in the next () method. Perfect solution, no need to bind monitoring and then unbind monitoring.