vue3 +elementPlus 实现回车Enter登录

简介: vue3 +elementPlus 实现回车Enter登录

1、submit() 为登录事件,@keydown.enter="keyDown()"为用户按下enter键触发的事件

<el-button @click="submit()" @keydown.enter="keyDown()">登录</el-button>


2、keyDown()

//点击回车键登录
const keyDown = (e) => {
  if (e.keyCode == 13 || e.keyCode == 100) {
    submit()
  }
}


3、在onMounted()绑定监听事件

onMounted(() => {
  //绑定监听事件
  window.addEventListener('keydown', keyDown)
});


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

onUnmounted(() => {
  //销毁事件
  window.removeEventListener('keydown', keyDown, false)
});
相关文章
|
9天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
28 2
|
9天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
19 2
|
9天前
|
JavaScript 开发工具 开发者
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
32 1
|
9天前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
19 1
|
9天前
|
JavaScript
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
17 1
|
4天前
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
6 0
|
4天前
|
JavaScript
【vue3】vue3中路由hash与History的设置
【vue3】vue3中路由hash与History的设置
9 0
|
4天前
|
编解码 前端开发
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
11 0
|
4天前
|
JavaScript
【vue】 vue 翻页时钟制作,vue2、vue3
【vue】 vue 翻页时钟制作,vue2、vue3
11 0
|
9天前
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
20 0