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>

代碼如下：

? 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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue實現(xiàn)簡易圖片左右旋轉(zhuǎn),上一張,下一張組件案例
這篇文章主要介紹了vue實現(xiàn)簡易圖片左右旋轉(zhuǎn),上一張,下一張組件案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue項目打包部署到服務(wù)器的方法示例
這篇文章主要介紹了vue項目打包部署到服務(wù)器的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
深入理解Vue 單向數(shù)據(jù)流的原理
這篇文章主要介紹了深入理解Vue 單向數(shù)據(jù)流的原理，詳細(xì)的介紹了Vue 單向數(shù)據(jù)流的原理和使用，具有一定的參考價值，有興趣的可以了解一下
2017-11-11
vue如何判斷安卓還是IOS
這篇文章主要介紹了vue如何判斷安卓還是IOS，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
antd實現(xiàn)table組件選中單行換樣式(比如背景顏色)
這篇文章主要介紹了antd實現(xiàn)table組件選中單行換樣式(比如背景顏色),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
Nuxt封裝@nuxtjs/axios請求后端數(shù)據(jù)方式
這篇文章主要介紹了Nuxt封裝@nuxtjs/axios請求后端數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
詳解vue-router和vue-cli以及組件之間的傳值
這篇文章主要介紹了詳解vue-router和vue-cli以及組件之間的傳值,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
vue+elementUi圖片上傳組件使用詳解
這篇文章主要為大家詳細(xì)介紹了vue+elementUi圖片上傳組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-08-08
ant design vue中table表格滾動加載實現(xiàn)思路
在處理一寫數(shù)據(jù)量特別大的情況下,我們不能把后端的數(shù)據(jù)一次性全部拿到前端在table表格中展示,為了考慮性能優(yōu)化,使用了滾動加載表格數(shù)據(jù),這篇文章主要介紹了ant design vue中table表格滾動加載實現(xiàn)思路,需要的朋友可以參考下
2024-07-07
深入了解Vue3模板編譯原理
這篇文章主要介紹了深入了解Vue3模板編譯原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11