vue回车实现登录

Vue 实现回车登录功能

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

在输入框上监听 keyup.enter 事件

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

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

在表单上监听 submit 事件

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="username" 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>

使用全局键盘事件监听

<template>
  <input v-model="username" ref="usernameInput" placeholder="用户名">
  <input v-model="password" ref="passwordInput" placeholder="密码">
  <button @click="handleLogin">登录</button>
</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>

使用自定义指令

// 全局注册自定义指令
Vue.directive('enter', {
  bind(el, binding) {
    el.addEventListener('keyup', (event) => {
      if (event.key === 'Enter') {
        binding.value()
      }
    })
  }
})

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

以上方法都可以实现回车登录功能，根据项目需求选择最适合的方式。表单提交方式是最符合 HTML 规范的实现方法，推荐优先使用。