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

简介: 基于Vue2用keydown、setTimeout事件实现连续按键(连击)任意键(或组合键)3秒触发自定义事件(以F1键为例)

核心代码

<template></template>
<script>
export default {
  created() {
    //监听弹起快捷键
    addEventListener("keyup", this.keyup);
  },
  destroyed(d) {
    //移除监听弹起快捷键
    removeEventListener("keyup", this.keyup);
  },
  methods: {
    keyup(e) {
      if (e.key === this.$global.version.key) {
        ++this.$global.version.keyupTimes >= this.$global.version.maxTimes &&
          this.$global.version.multiKeyPressCallback();
        this.$global.version.keyupTimes === 1 &&
          setTimeout(
            () => (this.$global.version.keyupTimes = 0),
            1000 * this.$global.version.delaySecond
          );
        e.stopPropagation();
        e.preventDefault();
        return false;
      }
    },
  },
};
</script>

配置文件

export default {
 
    version: {
        time: "2024年2月6日 17:30:03", //版本时间
        key: "F1", //触发快捷键
        multiKeyPressCallback(d) {
            alert(`【更新时间】${this.time}\n(注意校对是否已发布最新代码)`);
        }, //长按结束触发方法
        delaySecond: 3, //多少秒内连续按键
        keyupTimes: 0, //当前按键次数
        maxTimes: 5, //连续按键次数
    },
 
}

关联长按键盘任意键或组合键

image.png


相关文章
|
5月前
|
JavaScript
vue全屏事件与关闭全屏事件
vue全屏事件与关闭全屏事件
70 0
|
1月前
基于Vue2用keydown、keyup事件实现长按键盘任意键(或组合键)3秒触发自定义事件(以F1键为例)
基于Vue2用keydown、keyup事件实现长按键盘任意键(或组合键)3秒触发自定义事件(以F1键为例)
|
1月前
|
JavaScript
原生js实现【longPressKey】长按键盘任意键(或组合键)3秒触发自定义事件(以Pause/Break键为例)
原生js实现【longPressKey】长按键盘任意键(或组合键)3秒触发自定义事件(以Pause/Break键为例)
|
4月前
|
JavaScript 前端开发
js基础——事件(鼠标事件、键盘事件、表单事件......)
js基础——事件(鼠标事件、键盘事件、表单事件......)
32 0
|
9月前
键盘绑定按下事件
键盘绑定按下事件
30 0
|
5月前
页面监听键盘事件
页面监听键盘事件
|
5月前
|
存储 前端开发 JavaScript
点击按钮时触发防抖
点击按钮时触发防抖
49 0
|
5月前
|
JavaScript
Vue 触发回车事件
Vue 触发回车事件
|
7月前
|
存储 消息中间件 监控
12.1 使用键盘鼠标监控钩子
本节将介绍如何使用`Windows API`中的`SetWindowsHookEx`和`RegisterHotKey`函数来实现键盘鼠标的监控。这些函数可以用来设置全局钩子,通过对特定热键挂钩实现监控的效果,两者的区别在于`SetWindowsHookEx`函数可以对所有线程进行监控,包括其他进程中的线程,而`RegisterHotKey`函数只能对当前线程进行监控。首先我们来实现注册热键功能,注册热键可以使用`RegisterHotKey()`函数,该函数可以将一个热键与当前应用程序或线程绑定,使得当用户按下热键时,系统会自动将该热键的消息发送到该应用程序或线程中。
52 0
12.1 使用键盘鼠标监控钩子
|
12月前
|
前端开发
【React工作记录五十三】键盘绑定按下事件
【React工作记录五十三】键盘绑定按下事件
91 0