当前位置：首页 > VUE

vue回车实现登录

2026-02-17 02:02:09VUE

在Vue中实现回车登录功能

通过监听键盘事件来触发登录操作

模板部分

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

脚本部分

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      if(this.username && this.password) {
        // 调用登录API
        console.log('登录中...', this.username, this.password)
        // 实际项目中这里应该是API调用
      }
    }
  }
}
</script>

使用修饰符简化事件处理

Vue提供了.enter按键修饰符，可以直接在模板中绑定回车事件

<input v-model="password" type="password" @keyup.enter="handleLogin">

封装成可复用组件

创建一个独立的登录组件，包含回车登录功能

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.username" @keyup.enter="handleSubmit">
    <input v-model="form.password" type="password" @keyup.enter="handleSubmit">
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('login', this.form)
    }
  }
}
</script>

全局键盘事件监听

对于SPA应用，可以在根组件监听全局键盘事件

mounted() {
  window.addEventListener('keyup', (e) => {
    if(e.key === 'Enter' && this.isLoginPage) {
      this.handleLogin()
    }
  })
},
beforeDestroy() {
  window.removeEventListener('keyup')
}