基于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

相关推荐
社恐的下水道蟑螂3 分钟前
用 n8n 打造 AI 科技新闻速览工作流:自动化获取、总结,每天高效充电
前端
学习编程的Kitty9 分钟前
JavaEE初阶——多线程(2)线程的使用
java·开发语言·java-ee
counting money10 分钟前
JAVAEE阶段学习指南
java·开发语言
陈随易10 分钟前
PaddleOCR-VL可太强了,图片识别转文字的巅峰之作
前端·后端·程序员
盗德11 分钟前
紧急项目下,前端是“先乱炖”还是“慢火煲汤”?我选第三条路
前端·程序员
zmirror13 分钟前
Monorepo单仓多包&独立部署
前端
Linsk13 分钟前
为什么BigInt无法通过Babel降级?
前端·typescript·前端工程化
大大大大物~14 分钟前
数据结构之HashMap(容器)
java·数据结构·容器
colorFocus14 分钟前
都25年了,快用?.替代&&,??替代||
javascript
Asort14 分钟前
JavaScript设计模式(十八)——备忘录模式:状态保存与恢复的艺术
前端·javascript·设计模式