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

 更新时间:2020年09月09日 09:26:15   作者:在咕噜上敲打  
这篇文章主要介绍了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()
   }
 }

就是在next()方法里面重定向就行。完美解决,还不用绑定监听再解绑监听。

以上这篇vue 手机物理监听键+退出提示代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 利用Vue Router实现单页面应用(SPA)的代码示例

    利用Vue Router实现单页面应用(SPA)的代码示例

    在当今前端开发中,单页面应用(SPA)已成为一种主流的开发模式,它通过在用户与网页之间提供更流畅的交互体验,来改变传统多页面应用的思维,本文将详细介绍如何利用 Vue.js 中的 Vue Router 来实现一个简单的单页面应用,需要的朋友可以参考下
    2025-01-01
  • vue插槽slot的理解和使用方法

    vue插槽slot的理解和使用方法

    这篇文章主要给大家介绍了关于vue中插槽slot的理解和使用方法,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • Vue中使用方法、计算属性或观察者的方法实例详解

    Vue中使用方法、计算属性或观察者的方法实例详解

    这篇文章主要介绍了Vue中如何使用方法、计算属性或观察者的相关知识,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-10-10
  • Vue 简单实现前端权限控制的示例

    Vue 简单实现前端权限控制的示例

    这篇文章主要介绍了Vue 简单实现前端权限控制的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • vue3 HighCharts自定义封装之径向条形图的实战过程

    vue3 HighCharts自定义封装之径向条形图的实战过程

    highcharts是国外知名基于javascript的图表库,下面这篇文章主要给大家介绍了关于vue3 HighCharts自定义封装之径向条形图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vue车牌号校验和银行校验实战

    vue车牌号校验和银行校验实战

    这篇文章主要介绍了vue车牌号校验和银行校验实战,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 基于element-UI input等组件宽度修改方式

    基于element-UI input等组件宽度修改方式

    这篇文章主要介绍了基于element-UI input等组件宽度修改方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue init webpack 建vue项目报错的解决方法

    vue init webpack 建vue项目报错的解决方法

    今天小编就为大家分享一篇vue init webpack 建vue项目报错的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 简单了解vue中父子组件如何相互传递值(基础向)

    简单了解vue中父子组件如何相互传递值(基础向)

    这篇文章主要介绍了简单了解vue中父子组件如何相互传递值(基础向),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • Vue中插槽和过滤器的深入讲解

    Vue中插槽和过滤器的深入讲解

    Vue插槽,是学习vue中必不可少的一节,越来越发现插槽的好用,而过滤数据也是我们日常开发中必然会用到的,这篇文章主要给大家介绍了关于Vue插槽和过滤器的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-07-07

最新评论