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