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)
});

补充知识：

1、addEventListener() 和removeEventListener()

addEventListener() 方法用于向指定元素添加监听事件。同一元素目标可重复添加，不会覆盖之前相同事件，配合 removeEventListener() 方法来移除事件。

1)addEventListener() ：

target.addEventListener(event, function, useCapture)

• target文档节点、document、window 或 XMLHttpRequest。
• event字符串，事件名称，不用带 "on" 前缀，比如“click”、“keydown”等。
• function实现了 EventListener 接口或者是 JavaScript 中的函数。当目标对象事件触发时，会传入一个事件参数，参数名称可自定义，如填写event，不需要也可不填写。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。
• useCapture是否使用捕捉（触发类型），布尔型，可空，true - 事件在捕获阶段执行 ，false - 事件在冒泡阶段执行，默认是false。

2)removeEventListener:

target.removeEventListener(event, function, useCapture)

• target文档节点、document、window 或 XMLHttpRequest。
• event字符串，必须。要移除的事件名称，不用带 "on" 前缀，比如“click”、“mouseover”、“keydown”等。
• function必须。指定要移除的函数。。
• useCapture可选。布尔值，指定移除事件句柄的阶段。true - 在捕获阶段移除事件句柄，false- 默认。在冒泡阶段移除事件句柄，如果添加两次事件句柄，一次在捕获阶段，一次在冒泡阶段，你必须单独移除该事件。

2、键盘事件

• keydown：当用户按下键盘上的任意按键时触发，如果按住不放，会重复触发此事件。
• keyup：当用户释放键盘上的按键时触发。