vue中怎麼點選回車鍵直接登入-前端問答-PHP中文網

首頁

web前端

前端問答

vue中怎麼點選回車鍵直接登入

王林

May 11, 2023 am 11:01 AM

Vue.js 是一款用於建立使用者介面的漸進式 JavaScript 框架。作為一款工具，Vue.js 更具靈活性，不僅可以運用於 PC 端網站，還可用於行動裝置應用程式開發。在許多場景下，我們需要讓使用者透過頁面上的表單來進行登入操作。在本文中，我們將介紹如何使用 Vue.js 實作回車鍵直接登入的功能。

一、基本程式碼實作

首先，我們需要一個輸入框和一個登入按鈕，範例程式碼如下：

<template>
  <div>
    <input v-model="username" type="text" placeholder="请输入用户名">
    <input v-model="password" type="password" placeholder="请输入密码" @keyup.enter="login">
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      // 登录操作
    }
  }
}
</script>

登入後複製

其中，v-model 指令用於雙向綁定輸入框的值，@keyup.enter 事件監聽回車鍵，@click 事件監聽滑鼠點選，login 為登錄函數。

我們在模板中，將回車鍵的事件綁定到了輸入框上，並且在登入按鈕上同步添加了點擊事件。在輸入框的回車事件中，直接呼叫了登入函數，以完成目前的登入操作。

二、防止重複提交

我們可以在登入按鈕和回車鍵事件上，使用@click.prevent 和@keyup.enter.prevent 防止多次提交，避免重複操作。如下：

<template>
  <div>
    <input v-model="username" type="text" placeholder="请输入用户名">
    <input v-model="password" type="password" placeholder="请输入密码" @keyup.enter.prevent="login">
    <button @click.prevent="login">登录</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: '',
      isSubmitting: false,
    }
  },
  methods: {
    login () {
      if(this.isSubmitting) return;
      
      this.isSubmiting = true;
      // 登录操作
      
      this.isSubmitting = false;
    }
  }
}
</script>

登入後複製

在資料中增加一個 isSubmitting 屬性，用於判斷目前是否正在提交表單。在呼叫登入函數時檢查該屬性是否為真，如果為真，則直接傳回，避免了重複提交表單，確保了使用者的正常體驗。

三、鍵盤焦點

當表單中存在多個輸入框時，我們需要一個方法來確定使用者在哪一個輸入框中。可以使用 Vue.js 提供的 ref 屬性來取得元素的鍵盤焦點。如下：

<template>
  <div>
    <input v-model="username" type="text" placeholder="请输入用户名" ref="usernameInput">
    <input v-model="password" type="password" placeholder="请输入密码" @keyup.enter.prevent="submit" ref="passwordInput">
    <button @click.prevent="submit">登录</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: '',
      isSubmitting: false,
    }
  },
  methods: {
    submit () {
      if(this.isSubmitting) return;
      
      this.isSubmiting = true;
      // 登录操作
  
      this.isSubmitting = false;
    }
  },
  mounted() {
    this.$refs.usernameInput.$el.focus();
  }
}
</script>

登入後複製

我們在mounted 生命週期中，使用$refs 屬性取得輸入框的DOM 元素，並使用focus 方法將鍵盤焦點設定在第一個輸入框。

四、總結

透過以上的實踐，我們學習到如何使用Vue.js 實現回車鍵直接登入的功能，並且應用了防止重複提交和鍵盤焦點的處理，優化了使用者體驗。程式碼範例中也給出了部分實作程式碼，希望對您有幫助。

以上是vue中怎麼點選回車鍵直接登入的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn