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

相关推荐
一只小风华~3 分钟前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号4 分钟前
【大前端】前端生成二维码
前端·二维码
程序员码歌34 分钟前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康1 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海2 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏2 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码2 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby3 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹3 小时前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
excel3 小时前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端