VUE3 + Element Plus el-button添加回车enter事件实现登录

el-input框绑定键盘回车搜索事件 加上@keydown.enter=“handleEnter()”

1. 添加事件@keydown.enter

<el-button
      class="login-btn"
        type="primary"
        @click="onSubmit(loginRef)"
        @keydown.enter="handleEnter()"
        >登录</el-button
      >

2. 逻辑处理

const handleEnter = e => {
  if (e.keyCode == 13 || e.keyCode == 108) {
    //登录接口逻辑
  }
}

键盘上的键码值(keyCode)： enter(回车) 有两个, 分别对应 13 和 108 。

3. 监听事件：在onMounted()绑定监听事件

onMounted(() => {
  window.addEventListener('keydown', handleEnter)
})

4. 销毁事件：在onUnmounted()绑定销毁事件

onUnmounted(() => {
  window.removeEventListener('keydown', handleEnter, false)
})

---------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------