vue 手機物理監(jiān)聽鍵+退出提示代碼
我就廢話不多說了,大家還是直接看代碼吧~
<script> //Toast 這些都是在網(wǎng)上粘的別人的。但是找不到出處了,大佬見諒。 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>
代碼很簡單,邏輯也不是很復(fù)雜。但是要說一下為什么要用setTime( )。
我是在vue的index.html里面加的這些代碼。在沒有添加setTime()的時候不知道為啥他不執(zhí)行,檢查好幾遍也沒有錯。最后請教的大佬,他也不知道為什么。/笑哭 不過能用了。
之前也遇到了一個關(guān)閉手機端虛擬鍵盤的操作。他就是不執(zhí)行.。
document.activeElement.blur()
后來也是用settime( )解決的。
補充知識:Vue 單頁面處理手機返回鍵問題
在用Vue開發(fā)單頁面App時候,有時會遇到要處理返回按鍵的邏輯,讓它不是返回默認的上一級頁面,而是轉(zhuǎn)到指定的頁面。 百度了查了一下,網(wǎng)上給的方法基本都是通過監(jiān)聽“popstate”,并不能完美解決。后來想到了Router的“導(dǎo)航守衛(wèi)”,在離開時進行處理一下即可。話不多說,直接上例子:
beforeRouteLeave (to, from, next) { if(this.success){ next({path:'/home'});//重定向到指定路徑 }else{ next() } }
就是在next()方法里面重定向就行。完美解決,還不用綁定監(jiān)聽再解綁監(jiān)聽。
以上這篇vue 手機物理監(jiān)聽鍵+退出提示代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- vue中是怎樣監(jiān)聽數(shù)組變化的
- Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作分析
- Vue監(jiān)聽數(shù)組變化源碼解析
- vue深度監(jiān)聽(監(jiān)聽對象和數(shù)組的改變)與立即執(zhí)行監(jiān)聽實例
- Vue父組件監(jiān)聽子組件生命周期
- Vue 實現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請求
- vue 監(jiān)聽 Treeselect 選擇項的改變操作
- vue在App.vue文件中監(jiān)聽路由變化刷新頁面操作
- 關(guān)于vue中如何監(jiān)聽數(shù)組變化
相關(guān)文章
vue+intro.js插件實現(xiàn)引導(dǎo)功能
使用 intro.js這個插件,來實現(xiàn)一個引導(dǎo)性的效果,經(jīng)常在一些新手引導(dǎo)頁遇到這樣的需求,下面通過本文給大家分享vue+intro.js插件實現(xiàn)引導(dǎo)功能,感興趣的朋友一起看看吧2024-06-06vuejs 切換導(dǎo)航條高亮(路由菜單高亮)的方法示例
這篇文章主要介紹了vuejs 切換導(dǎo)航條高亮路由高亮的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05vue3中unplugin-auto-import自動引入示例代碼
unplugin-auto-import 這個插件是為了解決在開發(fā)中的導(dǎo)入問題,下面這篇文章主要給大家介紹了關(guān)于vue3中unplugin-auto-import自動引入的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02基于Vue3實現(xiàn)數(shù)字華容道游戲的示例代碼
這篇文章主要為大家詳細介紹了如何利用Vue編寫一個數(shù)字華容道游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04