Vue3实现回车键登录-前端-E先生的博客
Java
MySQL
大数据
Python
前端
黑科技
大语言模型
    首页 >> 互联网 >> 前端

Vue3实现回车键登录

[导读]:Vue3实现登录回车键绑定,实现回车登录<el-buttontype="primary"style="position:relative;right:35px;"@click="login()"@keyup.enter="keyDown(e)">登录</el-button>首先在onUnmounted中绑定监听事件onMounted(()=>...

Vue3实现登录回车键绑定,实现回车登录

<el-button type="primary" style="position: relative;right: 35px;" @click="login()" @keyup.enter="keyDown(e)">
登录
</el-button>

首先在onUnmounted中绑定监听事件

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

再写一个监听事件的方法

const keyDown = (e) => {
  //如果是回车则执行登录方法 喜欢的可以多研究下其他的按键keyCode
  if (e.keyCode == 13) {
    login()
  }
}

最后要销毁事件

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

image.png

本文来自E先生的博客,如若转载,请注明出处:https://javajz.cn

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

欢迎加Easy的QQ