VUE3给页面添加监听键盘事件
VUE3给页面添加监听键盘事件
·
在Vue 3中,可以通过使用setup函数来添加事件和自定义逻辑。下面是一个示例代码,演示了如何添加页面上的alt+b事件
<template>
<div>
<p>Press Alt + B to trigger the event!</p>
</div>
</template>
<script setup>
import { onMounted } from 'vue'
export default {
// 在页面挂载后添加事件监听
onMounted(() => {
const handleKeyDown = (event) => {
if (event.altKey && event.key === 'b') {
// 在这里执行要触发的逻辑
console.log('Alt + B is pressed!')
}
}
// 添加键盘事件监听
document.addEventListener('keydown', handleKeyDown)
// 在组件卸载时移除事件监听
// 考虑到你想要的是在页面卸载前移除事件监听,因此这里使用了`beforeUnmount`
// 如果你希望在页面卸载后再移除事件监听,可以使用`onUnmounted`
beforeUnmount(() => {
document.removeEventListener('keydown', handleKeyDown)
})
})
}
</script>
在setup函数中,我们使用onMounted
钩子函数来添加事件监听。在页面挂载后,会执行handleKeyDown
函数来判断是否按下了Alt + B键组合。你可以在handleKeyDown
函数中执行你的自定义逻辑。
同时,在组件卸载前,使用beforeUnmount
钩子函数来移除事件监听,以防止内存泄漏。
更多推荐
已为社区贡献6条内容
所有评论(0)