当前位置：首页 > VUE

vue 实现enter登录

2026-03-29 21:31:49VUE

实现 Enter 键登录功能

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

监听表单的 submit 事件

将登录按钮包裹在 form 标签内，利用表单的原生提交事件：

vue 实现enter登录

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

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

监听 input 的 keyup.enter 事件

在输入框上直接监听 Enter 键事件：

vue 实现enter登录

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

使用全局键盘事件监听

在组件挂载时添加事件监听，适合更复杂的键盘交互：

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

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

使用自定义指令

创建可复用的自定义指令：

// main.js 或单独指令文件
Vue.directive('enter', {
  bind(el, binding) {
    el.addEventListener('keyup', (event) => {
      if (event.key === 'Enter') {
        binding.value()
      }
    })
  }
})

// 组件中使用
<template>
  <input v-model="password" type="password" v-enter="handleLogin">
</template>