当前位置：首页 > VUE

vue实现enter键登录

2026-01-21 21:12:58VUE

实现 Enter 键登录的几种方法

在 Vue 中实现 Enter 键触发登录功能，可以通过监听键盘事件或结合表单的默认行为来实现。以下是几种常见方法：

方法一：监听 `keyup.enter` 事件

在模板中直接使用 @keyup.enter 修饰符绑定登录方法：

<template>
  <input 
    type="password" 
    v-model="password" 
    @keyup.enter="handleLogin"
    placeholder="按 Enter 登录"
  />
</template>

<script>
export default {
  methods: {
    handleLogin() {
      // 登录逻辑
    }
  }
}
</script>

方法二：通过原生事件监听

在 mounted 钩子中全局监听 keydown 事件，判断是否为 Enter 键（键码 13）：

<script>
export default {
  mounted() {
    window.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        this.handleLogin();
      }
    });
  },
  beforeDestroy() {
    window.removeEventListener('keydown'); // 避免内存泄漏
  }
}
</script>

方法三：表单的 `submit` 事件

将输入框包裹在 <form> 标签内，利用表单的默认提交行为：

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

注意：@submit.prevent 会阻止默认表单提交并触发自定义方法。

方法四：动态绑定多个输入框

多个输入框需统一监听 Enter 键时，可通过事件对象判断当前焦点：

vue实现enter键登录

<template>
  <input v-model="username" @keyup.enter="focusNext('password')">
  <input 
    ref="password" 
    v-model="password" 
    @keyup.enter="handleLogin"
  >
</template>

<script>
export default {
  methods: {
    focusNext(refName) {
      this.$refs[refName].focus();
    }
  }
}
</script>