vue登錄頁面回車執(zhí)行事件@keyup.enter.native問題
更新時間:2023年03月04日 14:43:25 作者:吳冬雪~
這篇文章主要介紹了vue登錄頁面回車執(zhí)行事件@keyup.enter.native問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
vue登錄頁面回車執(zhí)行事件@keyup.enter.native
<el-form ref="loginForm" :model="loginForm" :rules="loginFormRules" label-width="80px"> <!-- 用戶名 --> <el-form-item label="用戶名" prop="userName"> <el-input v-model="loginForm.userName" prefix-icon="el-icon-user" clearable @keyup.enter.native="submitForm('loginForm')"></el-input> </el-form-item> <!-- 密碼 --> <el-form-item label="密碼" prop="passWord" style="margin-bottom: 0;"> <el-input v-model="loginForm.passWord" prefix-icon="el-icon-lock" type="password" show-password @keyup.enter.native="submitForm('loginForm')"></el-input> </el-form-item> </el-form>
vue中回車鍵登錄實現(xiàn)
給登錄按鈕綁定兩個點擊事件:
代碼如下:
<el-button type="primary" @click="login()" @keyup.enter="keyDown(e)">登錄</el-button>
login 是直接點擊按鈕的登錄事件:
代碼如下:
? methods: { ? ? login() { ? ? ?? ? ? }, ? ?? ? ? // 點擊回車鍵登錄 ? ? keyDown(e) { ? ? ? // 回車則執(zhí)行登錄方法 enter鍵的ASCII是13 ? ? ? if (e.keyCode == 13 || e.keyCode == 100) { ? ? ? ? this.login(); // 定義的登錄方法 ? ? ? } ? ? }, ? }, ? mounted() { ? ? // 綁定監(jiān)聽事件 ? ? window.addEventListener("keydown", this.keyDown); ? }, ? destroyed() { ? ? // 銷毀事件 ? ? window.removeEventListener("keydown", this.keyDown, false); ? },
這樣就實現(xiàn)點擊鍵盤回車鍵和點擊按鈕實現(xiàn)登錄功能。
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
解決vue2.0路由跳轉(zhuǎn)未匹配相應用路由避免出現(xiàn)空白頁面的問題
今天小編就為大家分享一篇解決vue2.0路由跳轉(zhuǎn)未匹配相應用路由避免出現(xiàn)空白頁面的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08解決使用Vue.js顯示數(shù)據(jù)的時,頁面閃現(xiàn)原始代碼的問題
下面小編就為大家分享一篇解決使用Vue.js顯示數(shù)據(jù)的時,頁面閃現(xiàn)原始代碼的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02Vue3實現(xiàn)跨頁面?zhèn)髦档膸追N常見方法
在Vue 3中,跨頁面?zhèn)髦悼梢酝ㄟ^多種方式實現(xiàn),具體選擇哪種方法取決于應用的具體需求和頁面間的關系,本文列舉了幾種常見的跨頁面?zhèn)髦捣椒?感興趣的同學跟著小編來看看吧2024-04-04vue3.0使用vue-pdf-embed在線預覽pdf 控制頁碼顯示范圍不生效問題解決
這篇文章主要介紹了vue3.0使用vue-pdf-embed在線預覽pdf 控制頁碼顯示范圍不生效問題的問題及解決方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-01-01vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式
這篇文章主要介紹了vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07