vue Mobile Phone Physical Monitoring Key + Exit Prompt Code

  • 2021-08-12 02:06:29
  • OfStack

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

	//Toast  These are other people's stickers on the Internet. But can't find the source, big brother forgive me. 
	function Toast(msg,duration){
		var m = document.createElement('div');
		m.innerHTML = msg;"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;";
		setTimeout(function() {
			var d = 0.5; = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in'; = '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;
				} else {  //  Greater than 2s Reset the timestamp, 
					time = new Date();
					Toast(' Click Exit Again ', 2000);
			} else {
				console.log(' Unsatisfied condition ')
				history.back(); //  The exit operation is not satisfied, return to 1 Page 
		}, false);
	}, 10)

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..


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) {
    next({path:'/home'});// Redirect to the specified path 

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

Related articles: