Enter キーをクリックして Vue に直接ログインする方法

Vue.js は、ユーザー インターフェイスを構築するための進歩的な JavaScript フレームワークです。 Vue.js はツールとしてより柔軟性があり、PC の Web サイトだけでなくモバイル アプリケーションの開発にも使用できます。多くのシナリオでは、ユーザーがページ上のフォームからログインできるようにする必要があります。この記事では、Vue.jsを使って直接ログインするためのEnterキーを実装する方法を紹介します。

1. 基本的なコードの実装

まず、入力ボックスとログイン ボタンが必要です。サンプル コードは次のとおりです。 -model

このコマンドは、入力ボックスの値を 2 方向にバインドするために使用されます。

@keyup.enter イベントは Enter キーを監視し、@click イベントはマウスのクリックを監視します。 , loginはログイン関数です。 テンプレートでは、Enter キーのイベントを入力ボックスにバインドし、同時にクリック イベントをログイン ボタンに追加しました。入力ボックスの Enter イベントでは、ログイン関数が直接呼び出され、現在のログイン操作が完了します。

2. 繰り返しの送信を防ぐ

ログイン ボタンで

@click.prevent

と

@keyup.enter.prevent を使用し、キー イベントを入力できます 複数の送信を防止し、繰り返しの操作を避けます。次のように:

<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>

isSubmitting

属性をデータに追加して、フォームが現在送信されているかどうかを確認します。ログイン関数を呼び出すときに、この属性が true であるかどうかを確認してください。true である場合は、それを直接返し、フォームの繰り返しの送信を回避し、通常のユーザー エクスペリエンスを保証します。

3. キーボード フォーカス

フォーム内に複数の入力ボックスがある場合、ユーザーがどの入力ボックスに入っているかを判断するメソッドが必要です。 Vue.js が提供する

ref

属性を使用して、要素のキーボード フォーカスを取得できます。次のように:

<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>

mounted

ライフ サイクルでは、

$refs 属性を使用して入力ボックスの DOM 要素を取得し、 focus メソッドを使用して、キーボードのフォーカスを最初の入力ボックスに設定します。 4. まとめ

上記の実践を通じて、Vue.jsを利用したEnterキーによる直接ログイン機能の実装方法と、重複送信を防ぐための応用処理と最適化方法を学びました。そしてキーボード重視のユーザーエクスペリエンス。コード例には実装コードの一部も記載されておりますので、ご参考になれば幸いです。

以上がEnter キーをクリックして Vue に直接ログインする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。