基于Vue2用keydown、keyup事件实现长按键盘任意键(或组合键)3秒触发自定义事件(以F1键为例)

核心代码

html 复制代码
<template></template>
<script>
export default {
  created() {
    //监听长按快捷键
    addEventListener("keydown", this.keydown);
    addEventListener("keyup", this.keyup);
  },
  destroyed(d) {
    //移除长按快捷键
    removeEventListener("keydown", this.keydown);
    removeEventListener("keyup", this.keyup);
  },
  methods: {
    keydown(e) {
      if (e.key === this.$global.version.key) {
        if (!this.$global.version.timeout) {
          this.$global.version.pressedStartCallback(e);
          this.$global.version.timeout = setTimeout(() => {
            this.$global.version.pressedEndCallback(e);
            this.keyup(e);
          }, 1000 * this.$global.version.delaySecond);
        }
        e.stopPropagation();
        e.preventDefault();
        return false;
      }
    },
    keyup(e) {
      clearTimeout(this.$global.version.timeout), (this.$global.version.timeout = null);
      this.$global.version.pressedUpCallback(e);
    },
  },
};
</script>

配置文件

javascript 复制代码
export default {

    version: {
        time: "2024年2月6日 17:30:03", //版本时间(长按Pause Break五秒显示)
        key: "F1", //触发快捷键
        pressedEndCallback(d) {
            alert(`【更新时间】${this.time}\n(注意校对是否已发布最新代码)`);
        }, //长按结束触发方法
        pressedStartCallback(d) { }, //按下触发方法
        pressedUpCallback(d) { }, //弹起触发方法
        delaySecond: 3, //长按多少秒触发
        timeout: null,
    },

}

关联F1五连击

基于Vue2用keydown、setTimeout事件实现连续按键(连击)任意键(或组合键)3秒触发自定义事件(以F1键为例)-CSDN博客【代码】基于Vue2用keydown、setTimeout事件实现连续按键(连击)任意键(或组合键)3秒触发自定义事件(以F1键为例)https://blog.csdn.net/qq_37860634/article/details/136048467

相关推荐
Java水解22 分钟前
JAVA经典面试题附答案(持续更新版)
java·后端·面试
恋猫de小郭23 分钟前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
大怪v41 分钟前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
我是天龙_绍42 分钟前
vue3 props 如何写ts,进行类型标注
前端
叫我詹躲躲1 小时前
n8n 自动化工作流平台完整部署
前端·langchain·领域驱动设计
洛小豆2 小时前
在Java中,Integer.parseInt和Integer.valueOf有什么区别
java·后端·面试
遂心_2 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒3 小时前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
王同学QaQ3 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
前端小张同学3 小时前
服务器上如何搭建jenkins 服务CI/CD😎😎
java·后端