vue登錄頁面回車執行事件@keyup.enter.native問題

這篇“vue登錄頁面回車執行事件@keyup.enter.native問題”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue登錄頁面回車執行事件@keyup.enter.native問題”文章吧。

vue登錄頁面回車執行事件@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" >
          <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中回車鍵登錄實現

給登錄按鈕綁定兩個點擊事件：

代碼如下：

<el-button type="primary" @click="login（）" @keyup.enter="keyDown(e)">登錄</el-button>

login 是直接點擊按鈕的登錄事件：

代碼如下：

  methods: {
    login() {
      
    },
    
    // 點擊回車鍵登錄
    keyDown(e) {
      // 回車則執行登錄方法 enter鍵的ASCII是13
      if (e.keyCode == 13 || e.keyCode == 100) {
        this.login(); // 定義的登錄方法
      }
    },
  },
  mounted() {
    // 綁定監聽事件
    window.addEventListener("keydown", this.keyDown);
  },
  destroyed() {
    // 銷毀事件
    window.removeEventListener("keydown", this.keyDown, false);
  },

這樣就實現點擊鍵盤回車鍵和點擊按鈕實現登錄功能。

以上就是關于“vue登錄頁面回車執行事件@keyup.enter.native問題”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。