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钩子函数来移除事件监听，以防止内存泄漏。