vue中實(shí)現(xiàn)回車鍵登錄功能
created() {
let that = this;
document.onkeypress = function(e) {
var keycode = document.all ? event.keyCode : e.which;
if (keycode == 13) {
that.login();// 登錄方法名
return false;
}
};
}
以上的代碼，在這幾天測試發(fā)現(xiàn)有一個問題，在登錄進(jìn)系統(tǒng)之后，從首頁切換到其他界面，點(diǎn)擊回車，會導(dǎo)致界面調(diào)整到首頁！
要實(shí)現(xiàn)：
只在Login界面點(diǎn)擊回車才執(zhí)行onkeypress方法，其他的點(diǎn)回車均不觸發(fā)(還不明白為什么在其他界面回車會執(zhí)行Login界面的created-_-|| )
思路：
在Login.vue最外層綁定id，再綁定鍵盤事件。
$(“#loginDiv”).bind("keypress",toLogin);
測試發(fā)現(xiàn)監(jiān)聽不到按鍵事件，因?yàn)閐iv元素沒法獲取焦點(diǎn)，但只要為div元素加上tabIndex屬性就能獲取焦點(diǎn)
<div tabIndex=-1></div>
以上方法雖然也能觸發(fā)keypress，但還有點(diǎn)瑕疵~ 就是打開登錄頁時，需要鼠標(biāo)點(diǎn)一下界面，才能觸發(fā)keypress！?。?/p>
又一思路：界面中需要有一個聚焦，在回車時才好執(zhí)行keypress。故在界面中加input文本框，讓不管從哪里打開或跳到Login.vue都聚焦文本框
所以自定義指令：
<div id="loginDiv" tabindex="1" style="outline:0;" > <input type="text" v-focus style="opacity:0;position:absolute;"> </div>
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
},
自定義指令及inserted用法截圖自vue官網(wǎng)文檔如下：
知識點(diǎn)補(bǔ)充：
vue項(xiàng)目里登錄界面實(shí)現(xiàn)回車登錄
方法一：
在vue的created鉤子函數(shù)中寫
//登錄添加鍵盤事件,注意,不能直接在焦點(diǎn)事件上添加回車
// let that = this;
// document.onkeydown = function (e) {
// e = window.event || e;
// if(that.$route.path=='/login'&&(e.code=='Enter'||e.code=='Num Enter')){//驗(yàn)證在登錄界面和按得鍵是回車鍵enter
// that.handleSubmit2('ruleForm2');//登錄函數(shù) （handleSubmit2('ruleForm2')-登錄按鈕的點(diǎn)擊事件）
// }
// }
注意：只對主鍵盤的Enter管用
方法二：
在vue的created鉤子函數(shù)中寫
var _self = this;
document.onkeydown = function(e){
var key = window.event.keyCode;
if(key == 13 || key == 100){
_self.handleSubmit2('ruleForm2');
}
}
對主鍵盤和小鍵盤的Enter都管用
總結(jié)
以上所述是小編給大家介紹的vue中實(shí)現(xiàn)回車鍵登錄功能，希望對大家有所幫助，也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Element-UI是基于vue實(shí)現(xiàn)的一套不依賴業(yè)務(wù)的UI組件庫,提供了豐富的PC端組件,減少用戶對常用組件的封裝,降低了開發(fā)的難易程度,下面這篇文章主要給大家介紹了關(guān)于vue使用element-ui按需引入時踩過的那些坑,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue3使用echarts并封裝echarts組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue-cli3項(xiàng)目生產(chǎn)和測試環(huán)境分包后文件名和數(shù)量不一致解決
這篇文章主要為大家介紹了vue-cli3項(xiàng)目生產(chǎn)和測試環(huán)境分包后文件名和數(shù)量不一致解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了Vue nextTick的原理解析，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
vue使用better-scroll實(shí)現(xiàn)橫向滾動的方法實(shí)例
這幾天研究項(xiàng)目時,看到了 better-scroll 插件,看著感覺功能挺強(qiáng),這篇文章主要給大家介紹了關(guān)于vue使用better-scroll實(shí)現(xiàn)橫向滾動的相關(guān)資料,需要的朋友可以參考下2021-06-06
在vue3中動態(tài)加載遠(yuǎn)程組件的流程步驟
在一些特殊的場景中（比如低代碼、減少小程序包體積、類似于APP的熱更新）,我們需要從服務(wù)端動態(tài)加載.vue文件,然后將動態(tài)加載的遠(yuǎn)程vue組件渲染到我們的項(xiàng)目中,今天這篇文章我將帶你學(xué)會,在vue3中如何去動態(tài)加載遠(yuǎn)程組件,感興趣的小伙伴跟著小編一起來看看吧2024-08-08
這篇文章主要介紹了Vue3在Setup中使用axios請求獲取的值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue-cli 3.0 自定義vue.config.js文件,多頁構(gòu)建的方法
今天小編就為大家分享一篇vue-cli 3.0 自定義vue.config.js文件,多頁構(gòu)建的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了解決vue過濾器filters獲取不到this對象的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
vue使用better-scroll實(shí)現(xiàn)滑動以及左右聯(lián)動
這篇文章主要介紹了vue使用better-scroll實(shí)現(xiàn)滑動以及左右聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06