vue 手機物理監(jiān)聽鍵+退出提示代碼
更新時間：2020年09月09日 09:26:15 作者：在咕嚕上敲打
這篇文章主要介紹了vue 手機物理監(jiān)聽鍵+退出提示代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
我就廢話不多說了，大家還是直接看代碼吧~
<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(() => {
// 監(jiān)聽返回按鈕
document.addEventListener('backbutton', function (evt) {
console.log('監(jiān)聽按鈕');
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（）的時候不知道為啥他不執(zhí)行，檢查好幾遍也沒有錯。最后請教的大佬，他也不知道為什么。/笑哭 不過能用了。
之前也遇到了一個關閉手機端虛擬鍵盤的操作。他就是不執(zhí)行.。
document.activeElement.blur()
后來也是用settime( )解決的。
補充知識：Vue 單頁面處理手機返回鍵問題
在用Vue開發(fā)單頁面App時候，有時會遇到要處理返回按鍵的邏輯，讓它不是返回默認的上一級頁面，而是轉到指定的頁面。 百度了查了一下，網上給的方法基本都是通過監(jiān)聽“popstate”，并不能完美解決。后來想到了Router的“導航守衛(wèi)”，在離開時進行處理一下即可。話不多說，直接上例子：
beforeRouteLeave (to, from, next) {
if(this.success){
next({path:'/home'});//重定向到指定路徑
}else{
next()
}
}
就是在next()方法里面重定向就行。完美解決，還不用綁定監(jiān)聽再解綁監(jiān)聽。
以上這篇vue 手機物理監(jiān)聽鍵+退出提示代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
在當今前端開發(fā)中,單頁面應用（SPA）已成為一種主流的開發(fā)模式,它通過在用戶與網頁之間提供更流暢的交互體驗,來改變傳統多頁面應用的思維,本文將詳細介紹如何利用 Vue.js 中的 Vue Router 來實現一個簡單的單頁面應用,需要的朋友可以參考下2025-01-01
這篇文章主要給大家介紹了關于vue中插槽slot的理解和使用方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-04-04
這篇文章主要介紹了Vue中如何使用方法、計算屬性或觀察者的相關知識，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了Vue 簡單實現前端權限控制的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
vue3?HighCharts自定義封裝之徑向條形圖的實戰(zhàn)過程
highcharts是國外知名基于javascript的圖表庫,下面這篇文章主要給大家介紹了關于vue3?HighCharts自定義封裝之徑向條形圖的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue車牌號校驗和銀行校驗實戰(zhàn)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了基于element-UI input等組件寬度修改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue init webpack 建vue項目報錯的解決方法
今天小編就為大家分享一篇vue init webpack 建vue項目報錯的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了簡單了解vue中父子組件如何相互傳遞值（基礎向）,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
Vue插槽,是學習vue中必不可少的一節(jié),越來越發(fā)現插槽的好用,而過濾數據也是我們日常開發(fā)中必然會用到的,這篇文章主要給大家介紹了關于Vue插槽和過濾器的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-07-07