当前位置：首页 > VUE

vue回车实现登录

2026-01-16 00:45:20VUE

Vue 实现回车登录功能

在 Vue 中实现回车登录功能，可以通过监听键盘事件来触发登录方法。以下是几种常见实现方式：

方法一：使用 `@keyup.enter` 指令

在表单或输入框上直接添加 @keyup.enter 指令，监听回车键按下事件：

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 登录逻辑
      console.log('登录中...', this.username, this.password);
    }
  }
}
</script>

方法二：监听整个表单的回车事件

将 @keyup.enter 绑定到表单元素上，统一处理回车事件：

<template>
  <form @keyup.enter="handleLogin">
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" placeholder="密码" type="password" />
    <button type="button" @click="handleLogin">登录</button>
  </form>
</template>

方法三：通过 JavaScript 动态监听

在 mounted 生命周期中动态添加事件监听：

<template>
  <div id="login-form">
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" placeholder="密码" type="password" />
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  mounted() {
    document.addEventListener('keyup', this.handleKeyPress);
  },
  beforeDestroy() {
    document.removeEventListener('keyup', this.handleKeyPress);
  },
  methods: {
    handleKeyPress(event) {
      if (event.key === 'Enter') {
        this.handleLogin();
      }
    },
    handleLogin() {
      // 登录逻辑
    }
  }
}
</script>

注意事项

表单提交阻止默认行为：如果使用 <form> 标签，需阻止默认提交行为以避免页面刷新：
```
<form @submit.prevent="handleLogin">
```
事件委托：若页面有多个输入框，建议使用方法二或方法三统一处理回车事件。
移动端兼容性：回车事件在移动端可能表现不同，需测试兼容性。
无障碍访问：确保按钮有明确的 type 属性，避免误触发表单提交。