Comment cliquer sur la touche Entrée pour vous connecter directement à Vue-Questions et réponses frontales-php.cn

Comment cliquer sur la touche Entrée pour vous connecter directement à Vue

王林

Libérer： 2023-05-11 11:01:07

original

2717 Les gens l'ont consulté

Vue.js est un framework JavaScript progressif pour créer des interfaces utilisateur. En tant qu'outil, Vue.js est plus flexible et peut être utilisé non seulement pour les sites Web PC mais également pour le développement d'applications mobiles. Dans de nombreux scénarios, nous devons permettre aux utilisateurs de se connecter via un formulaire sur la page. Dans cet article, nous présenterons comment utiliser Vue.js pour implémenter la touche Entrée pour vous connecter directement.

1. Implémentation du code de base

Tout d'abord, nous avons besoin d'une zone de saisie et d'un bouton de connexion. L'exemple de code est le suivant :

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

Copier après la connexion

Parmi eux, la directive v-model est utilisée pour deux. -way lie la valeur de la zone de saisie, l'événement @keyup.enter surveille la touche entrée, l'événement @click surveille le clic de la souris et login</code > est la fonction de connexion. <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>

Copier après la connexion

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

Copier après la connexion

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

Dans le modèle, nous avons lié l'événement de touche Entrée à la zone de saisie et ajouté simultanément un événement de clic au bouton de connexion. Dans l'événement enter de la zone de saisie, la fonction de connexion est directement appelée pour terminer l'opération de connexion en cours.

2. Empêcher les soumissions répétées

Nous pouvons utiliser @click.prevent et @keyup.enter.prevent sur le bouton de connexion et saisir des événements clés pour empêcher les soumissions multiples. pour éviter les doubles emplois. Comme suit : 🎜rrreee🎜Ajoutez un attribut isSubmitting aux données pour déterminer si le formulaire est actuellement en cours de soumission. Vérifiez si cet attribut est vrai lors de l'appel de la fonction de connexion. S'il est vrai, renvoyez-le directement, en évitant la soumission répétée du formulaire et en garantissant une expérience utilisateur normale. 🎜🎜3. Focus clavier🎜🎜Lorsqu'il y a plusieurs zones de saisie dans le formulaire, nous avons besoin d'une méthode pour déterminer dans quelle zone de saisie se trouve l'utilisateur. Vous pouvez obtenir le focus clavier d'un élément en utilisant l'attribut ref fourni par Vue.js. Comme suit : 🎜rrreee🎜Dans le cycle de vie Mounted, nous utilisons l'attribut $refs pour obtenir l'élément DOM de la zone de saisie, et utilisons le

focus méthode pour focaliser le clavier. Le focus est défini sur la première zone de saisie. 🎜🎜4. Résumé🎜🎜Grâce aux pratiques ci-dessus, nous avons appris à utiliser Vue.js pour implémenter la fonction de connexion directe avec la touche Entrée et appliqué un traitement pour éviter les soumissions répétées et la mise au point du clavier, optimisant ainsi l'expérience utilisateur. Une partie du code d'implémentation est également donnée dans l'exemple de code, j'espère qu'il vous sera utile. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!