欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue 手機(jī)物理監(jiān)聽(tīng)鍵+退出提示代碼

 更新時(shí)間:2020年09月09日 09:26:15   作者:在咕嚕上敲打  
這篇文章主要介紹了vue 手機(jī)物理監(jiān)聽(tīng)鍵+退出提示代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

我就廢話不多說(shuō)了,大家還是直接看代碼吧~

	<script>
	//Toast 這些都是在網(wǎng)上粘的別人的。但是找不到出處了,大佬見(jiàn)諒。
	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 = '' // 用來(lái)存上一次按鍵時(shí)間;
	setTimeout(() => {
		// 監(jiān)聽(tīng)返回按鈕
		document.addEventListener('backbutton', function (evt) {
			console.log('監(jiān)聽(tīng)按鈕');
			var url = location.hash.split('/')[1];
			if (url === 'home' ) {// 處于app首頁(yè),滿足退出app操作
				console.log('滿足條件')
				if (new Date() - time < 2000) {// 小于2s,退出程序
					navigator.app.exitApp();
				} else {  // 大于2s,重置時(shí)間戳,
					time = new Date();
					Toast('再次點(diǎn)擊退出', 2000);
				}
				return;
			} else {
				console.log('不滿足條件')
				history.back(); // 不滿足退出操作,,返回上一頁(yè)
			}
		}, false);
	}, 10)
</script>

代碼很簡(jiǎn)單,邏輯也不是很復(fù)雜。但是要說(shuō)一下為什么要用setTime( )。

我是在vue的index.html里面加的這些代碼。在沒(méi)有添加setTime()的時(shí)候不知道為啥他不執(zhí)行,檢查好幾遍也沒(méi)有錯(cuò)。最后請(qǐng)教的大佬,他也不知道為什么。/笑哭 不過(guò)能用了。

之前也遇到了一個(gè)關(guān)閉手機(jī)端虛擬鍵盤(pán)的操作。他就是不執(zhí)行.。

document.activeElement.blur()

后來(lái)也是用settime( )解決的。

補(bǔ)充知識(shí):Vue 單頁(yè)面處理手機(jī)返回鍵問(wèn)題

在用Vue開(kāi)發(fā)單頁(yè)面App時(shí)候,有時(shí)會(huì)遇到要處理返回按鍵的邏輯,讓它不是返回默認(rèn)的上一級(jí)頁(yè)面,而是轉(zhuǎn)到指定的頁(yè)面。 百度了查了一下,網(wǎng)上給的方法基本都是通過(guò)監(jiān)聽(tīng)“popstate”,并不能完美解決。后來(lái)想到了Router的“導(dǎo)航守衛(wèi)”,在離開(kāi)時(shí)進(jìn)行處理一下即可。話不多說(shuō),直接上例子:

beforeRouteLeave (to, from, next) {
   if(this.success){
    next({path:'/home'});//重定向到指定路徑
   }else{
    next()
   }
 }

就是在next()方法里面重定向就行。完美解決,還不用綁定監(jiān)聽(tīng)再解綁監(jiān)聽(tīng)。

以上這篇vue 手機(jī)物理監(jiān)聽(tīng)鍵+退出提示代碼就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能

    vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能

    使用 intro.js這個(gè)插件,來(lái)實(shí)現(xiàn)一個(gè)引導(dǎo)性的效果,經(jīng)常在一些新手引導(dǎo)頁(yè)遇到這樣的需求,下面通過(guò)本文給大家分享vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能,感興趣的朋友一起看看吧
    2024-06-06
  • vue keep-alive中的生命周期解讀

    vue keep-alive中的生命周期解讀

    這篇文章主要介紹了vue keep-alive中的生命周期,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 淺談vue加載優(yōu)化策略

    淺談vue加載優(yōu)化策略

    這篇文章主要介紹了淺談vue加載優(yōu)化策略,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-03-03
  • vue3中的父子組件通訊詳情

    vue3中的父子組件通訊詳情

    這篇文章主要介紹了vue3中的父子組件通訊詳情,文章以傳統(tǒng)的props展開(kāi)主題相關(guān)資料內(nèi)容,具有一定參考價(jià)值,需要的小伙伴可以參考一下
    2022-06-06
  • vue中解決微信html5原生ios虛擬鍵返回不刷新問(wèn)題

    vue中解決微信html5原生ios虛擬鍵返回不刷新問(wèn)題

    這篇文章主要介紹了vue中解決微信html5原生ios虛擬鍵返回不刷新問(wèn)題,本文給大家分享解決方法,通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-10-10
  • vuejs 切換導(dǎo)航條高亮(路由菜單高亮)的方法示例

    vuejs 切換導(dǎo)航條高亮(路由菜單高亮)的方法示例

    這篇文章主要介紹了vuejs 切換導(dǎo)航條高亮路由高亮的方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-05-05
  • vue3中unplugin-auto-import自動(dòng)引入示例代碼

    vue3中unplugin-auto-import自動(dòng)引入示例代碼

    unplugin-auto-import 這個(gè)插件是為了解決在開(kāi)發(fā)中的導(dǎo)入問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue3中unplugin-auto-import自動(dòng)引入的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-02-02
  • vue關(guān)閉開(kāi)發(fā)模式提示的簡(jiǎn)單解決辦法

    vue關(guān)閉開(kāi)發(fā)模式提示的簡(jiǎn)單解決辦法

    Vue開(kāi)發(fā)模式是一種基于Vue.js框架的開(kāi)發(fā)方式,它可以幫助開(kāi)發(fā)者更高效地構(gòu)建和維護(hù)復(fù)雜的Web應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于vue關(guān)閉開(kāi)發(fā)模式提示的簡(jiǎn)單解決辦法,需要的朋友可以參考下
    2024-04-04
  • vue實(shí)現(xiàn)圖書(shū)管理demo詳解

    vue實(shí)現(xiàn)圖書(shū)管理demo詳解

    這篇文章主要介紹了vue實(shí)現(xiàn)圖書(shū)管理,分享了圖書(shū)管理demo用的知識(shí)點(diǎn),以及遇到問(wèn)題的總結(jié),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-10-10
  • 基于Vue3實(shí)現(xiàn)數(shù)字華容道游戲的示例代碼

    基于Vue3實(shí)現(xiàn)數(shù)字華容道游戲的示例代碼

    這篇文章主要為大家詳細(xì)介紹了如何利用Vue編寫(xiě)一個(gè)數(shù)字華容道游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04

最新評(píng)論