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 手机物理监听键+退出提示代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 如何使用elementUI组件实现表格的分页及搜索功能

    如何使用elementUI组件实现表格的分页及搜索功能

    最近在使用element-ui的表格组件时,遇到了搜索框功能的实现问题,这篇文章主要给大家介绍了关于如何使用elementUI组件实现表格的分页及搜索功能的相关资料,需要的朋友可以参考下
    2023-03-03
  • Vue简单实现原理详解

    Vue简单实现原理详解

    这篇文章主要介绍了Vue简单实现原理,结合实例形式详细分析了Vue实现原理与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • vue3.0中的双向数据绑定方法及优缺点

    vue3.0中的双向数据绑定方法及优缺点

    这篇文章主要介绍了vue3.0中的双向数据绑定方法 ,文中通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • Vue数据双向绑定的实现方式讲解

    Vue数据双向绑定的实现方式讲解

    Vue数据双向绑定原理:Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更新
    2022-08-08
  • 程序员应该知道的vuex冷门小技巧(超好用)

    程序员应该知道的vuex冷门小技巧(超好用)

    Vue基本用法很容易上手,但是有很多优化的写法你就不一定知道了,下面这篇文章主要给大家介绍了关于程序员应该知道的vuex冷门小技巧的相关资料,需要的朋友可以参考下
    2022-05-05
  • 一文快速详解前端框架 Vue 最强大的功能

    一文快速详解前端框架 Vue 最强大的功能

    组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。这篇文章主要介绍了一文快速详解前端框架 Vue 最强大的功能,需要的朋友可以参考下
    2019-05-05
  • 通过实例讲解vue组件之间的传值

    通过实例讲解vue组件之间的传值

    通过Vuex共享数据,官方给出的跨多组件传递数据的解决方案,下面这篇文章主要给大家介绍了关于vue组件之间传值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vue 使用 canvas 实现手写电子签名

    vue 使用 canvas 实现手写电子签名

    这篇文章主要介绍了vue 使用 canvas 实现手写电子签名功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • vue-axios使用详解

    vue-axios使用详解

    本篇文章主要介绍了vue-axios使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • vue 实现动态路由的方法

    vue 实现动态路由的方法

    这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07

最新评论