So klicken Sie auf die Eingabetaste, um sich direkt bei Vue anzumelden-Front-End-Fragen und Antworten-php.cn

So klicken Sie auf die Eingabetaste, um sich direkt bei Vue anzumelden

王林

Freigeben： 2023-05-11 11:01:07

Original

2719 Leute haben es durchsucht

Vue.js ist ein progressives JavaScript-Framework zum Erstellen von Benutzeroberflächen. Als Tool ist Vue.js flexibler und kann nicht nur für PC-Websites, sondern auch für die Entwicklung mobiler Anwendungen verwendet werden. In vielen Szenarien müssen wir Benutzern ermöglichen, sich über ein Formular auf der Seite anzumelden. In diesem Artikel stellen wir vor, wie Sie Vue.js verwenden, um die Eingabetaste für die direkte Anmeldung zu implementieren.

1. Grundlegende Code-Implementierung

Zuerst benötigen wir ein Eingabefeld und eine Anmeldeschaltfläche. Der Beispielcode lautet wie folgt:

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

Nach dem Login kopieren

Davon wird die v-model-Direktive verwendet -way bindet den Wert des Eingabefelds, das Ereignis @keyup.enter überwacht die Eingabetaste, das Ereignis @click überwacht den Mausklick und das Ereignis login</code > ist die Login-Funktion. <code>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>

Nach dem Login kopieren

在数据中增加一个 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>

Nach dem Login kopieren

我们在 mounted 生命周期中，使用 $refs 属性获取输入框的 DOM 元素，并使用 focus

In der Vorlage haben wir das Eingabetastenereignis an das Eingabefeld gebunden und gleichzeitig ein Klickereignis zur Anmeldeschaltfläche hinzugefügt. Beim Eingabeereignis des Eingabefelds wird die Anmeldefunktion direkt aufgerufen, um den aktuellen Anmeldevorgang abzuschließen.

2. Wiederholte Übermittlungen verhindern

Wir können @click.prevent und @keyup.enter.prevent auf der Anmeldeschaltfläche verwenden und Schlüsselereignisse eingeben, um mehrfache Übermittlungen zu verhindern um Doppelarbeit zu vermeiden. Wie folgt: 🎜rrreee🎜Fügen Sie ein isSubmitting-Attribut zu den Daten hinzu, um zu bestimmen, ob das Formular gerade übermittelt wird. Überprüfen Sie, ob dieses Attribut wahr ist, wenn Sie die Anmeldefunktion aufrufen. Wenn es wahr ist, geben Sie es direkt zurück, um eine wiederholte Übermittlung des Formulars zu vermeiden und eine normale Benutzererfahrung sicherzustellen. 🎜🎜3. Tastaturfokus🎜🎜Wenn das Formular mehrere Eingabefelder enthält, benötigen wir eine Methode, um zu bestimmen, in welchem Eingabefeld sich der Benutzer befindet. Sie können den Tastaturfokus eines Elements mithilfe des von Vue.js bereitgestellten Attributs ref abrufen. Wie folgt: 🎜rrreee🎜Im mounted-Lebenszyklus verwenden wir das $refs-Attribut, um das DOM-Element des Eingabefelds abzurufen, und verwenden den

focus-Methode zum Fokussieren der Tastatur Der Fokus wird auf das erste Eingabefeld gesetzt. 🎜🎜4. Zusammenfassung🎜🎜Durch die oben genannten Praktiken haben wir gelernt, wie man Vue.js verwendet, um die Funktion der direkten Anmeldung mit der Eingabetaste zu implementieren und die Verarbeitung anzuwenden, um wiederholte Übermittlungen und Tastaturfokus zu verhindern und so das Benutzererlebnis zu optimieren. Ein Teil des Implementierungscodes ist auch im Codebeispiel enthalten. Ich hoffe, dass er für Sie hilfreich ist. 🎜

Das obige ist der detaillierte Inhalt vonSo klicken Sie auf die Eingabetaste, um sich direkt bei Vue anzumelden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!