Vue.js is a progressive JavaScript framework for building user interfaces. As a tool, Vue.js is more flexible and can be used not only for PC websites but also for mobile application development. In many scenarios, we need to allow users to log in through a form on the page. In this article, we will introduce how to use Vue.js to implement the enter key to log in directly.
1. Basic code implementation
First, we need an input box and a login button. The sample code is as follows:
<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>
Among them, v-model
The command is used to bind the value of the input box in two directions, @keyup.enter
event monitors the enter key, @click
event monitors the mouse click, login
is login function.
In the template, we bound the event of the Enter key to the input box, and simultaneously added a click event to the login button. In the enter event of the input box, the login function is directly called to complete the current login operation.
2. Prevent repeated submissions
We can use @click.prevent
and @keyup.enter.prevent on the login button and enter key events
Prevent multiple submissions and avoid repeated operations. As follows:
<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>
Add a isSubmitting
attribute to the data to determine whether the form is currently being submitted. Check whether this attribute is true when calling the login function. If it is true, return it directly, avoiding repeated submission of the form and ensuring a normal user experience.
3. Keyboard focus
When there are multiple input boxes in the form, we need a method to determine which input box the user is in. You can get the keyboard focus of an element using the ref
attribute provided by Vue.js. As follows:
<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>
In the mounted
life cycle, we use the $refs
attribute to get the DOM element of the input box, and use the focus
method to Keyboard focus is set to the first input box.
4. Summary
Through the above practice, we have learned how to use Vue.js to implement the function of direct login with the enter key, and applied processing and optimization to prevent repeated submissions and keyboard focus user experience. Part of the implementation code is also given in the code example, I hope it will be helpful to you.
The above is the detailed content of How to click the Enter key to log in directly in Vue. For more information, please follow other related articles on the PHP Chinese website!