当前位置：首页 > VUE

vue 实现enter登录

2026-02-17 21:15:07VUE

Vue 实现 Enter 登录

在 Vue 中实现 Enter 登录功能可以通过监听键盘事件来完成。以下是几种常见的方法：

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

在模板中直接使用 Vue 的 @keyup.enter 指令，当用户按下 Enter 键时触发登录方法。

<template>
  <div>
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" @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>

方法二：监听表单的 `@submit` 事件

将输入框包裹在 form 标签中，监听表单的 @submit 事件。按下 Enter 键时会自动触发表单提交。

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

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

方法三：全局监听键盘事件

如果需要在整个页面监听 Enter 键，可以在 mounted 钩子中添加事件监听，并在 beforeDestroy 钩子中移除。

<template>
  <div>
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" ref="passwordInput" />
    <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() {
      // 登录逻辑
      console.log('登录中...', this.username, this.password)
    }
  }
}
</script>