Vue 3 监听键盘 Esc 键：返回键事件处理 - 示例教程

\u003ctemplate\u003e\n \u003cdiv\u003e\n \u003cp\u003ePress Esc to go back\u003c/p\u003e\n \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n mounted() {\n window.addEventListener('keydown', this.handleKeydown);\n },\n beforeUnmount() {\n window.removeEventListener('keydown', this.handleKeydown);\n },\n methods: {\n handleKeydown(event) {\n if (event.key === 'Escape') {\n // 处理按下Esc键的逻辑\n console.log('Esc key pressed');\n }\n }\n }\n}\n\u003c/script\u003e\n\n在上面的示例中，我们在组件的mounted钩子函数中添加了一个keydown事件监听器，并在beforeUnmount钩子函数中移除了监听器，以确保在组件销毁时不再监听键盘事件。在handleKeydown方法中，我们检查按下的键是否是Esc键，并在控制台中打印一条消息。\n\n请注意，我们在window对象上添加和移除事件监听器，以便在整个页面范围内监听键盘事件。如果你只想在特定的DOM元素上监听键盘事件，可以将事件监听器添加到该元素上。