VUE3给页面添加按钮事件

在Vue 3中,可以通过使用setup函数来添加事件和自定义逻辑。下面是一个示例代码,演示了如何添加页面上的alt+b事件

javascript 复制代码
<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钩子函数来移除事件监听,以防止内存泄漏。

相关推荐
傅里叶几秒前
Flutter用户体验之01-避免在 build() 或 initState() 内直接做耗时 blocking
前端·flutter
namehu4 分钟前
搞定 iOS App 测试包分发,也就这么简单!😎
前端·ios·app
code_YuJun8 分钟前
1. 使用VueCli编译生产环境代码以及创建不同模式
前端
MrGaoGang44 分钟前
耗时1年,终于我也拥有属于自己的AI工作流
前端·agent·ai编程
没有鸡汤吃不下饭1 小时前
前端【数据类型】 No.1 Javascript的数据类型与区别
前端·javascript·面试
码流之上1 小时前
【一看就会一写就废 指间算法】设计电子表格 —— 哈希表、字符串处理
javascript·算法
跟橙姐学代码1 小时前
Python时间处理秘籍:别再让日期时间卡住你的代码了!
前端·python·ipython
汤姆Tom1 小时前
从零到精通:现代原子化 CSS 工具链完全攻略 | PostCSS × UnoCSS × TailwindCSS 深度实战
前端·css·面试
菜市口的跳脚长颌1 小时前
Web3基础
前端
RoyLin1 小时前
TypeScript设计模式:代理模式
前端·后端·typescript