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


相关文章
|
监控 安全 NoSQL
5 个适用于 Linux 的开源日志监控和管理工具
5 个适用于 Linux 的开源日志监控和管理工具
1383 0
|
缓存 PyTorch 数据处理
基于Pytorch的PyTorch Geometric(PYG)库构造个人数据集
基于Pytorch的PyTorch Geometric(PYG)库构造个人数据集
1656 0
基于Pytorch的PyTorch Geometric(PYG)库构造个人数据集
|
Web App开发
一文读懂锁相环基本原理
一文读懂锁相环基本原理
3841 0
一文读懂锁相环基本原理
|
XML JSON 安全
OAuth vs SAML vs OpenID:了解它们之间的差异
身份验证允许进入系统,而授权允许访问同一系统内的特定功能。安全断言标记语言 (SAML) 是一种开放标准,它试图弥合身份验证和授权之间的鸿沟。
|
Java Linux 开发工具
用sdkman管理多个jdk切换
【10月更文挑战第13天】SDKMAN 是一个用于在基于 Unix 的系统(如 Linux 和 macOS)上管理多个软件开发工具包(SDK)版本的工具,特别适用于管理不同版本的 JDK。通过 SDKMAN,开发者可以轻松安装、切换和设置默认 JDK 版本,提高开发效率。安装后,可以通过 `sdk list java` 查看可用版本,使用 `sdk install java` 安装特定版本,并通过 `sdk use java` 切换版本。此外,还可以设置默认 JDK 版本,确保新终端会话中自动使用指定版本。验证版本切换是否成功,只需运行 `java -version` 命令即可。
2144 1
|
12月前
|
机器学习/深度学习 人工智能
生成式AI的创造性核心:涌现能力从何而来?
生成式AI的创造性核心:涌现能力从何而来?
835 119
|
12月前
|
人工智能 数据安全/隐私保护 开发者
一条AI指令,解决"发朋友圈不知道写啥"的千古难题
技术人发朋友圈总犯难?项目上线怕炫耀,生活瞬间不知如何表达。其实,用AI辅助写作是个妙招。关键在于给出清晰指令:明确场景、风格与需求,让AI生成真实自然、有温度的文案。本文提供一套即拿即用的AI指令模板,覆盖生活、工作、旅行等六大场景,帮你快速生成不“AI味”的朋友圈内容。省下纠结时间,真诚分享生活,才是正解。
1627 10
|
机器学习/深度学习 人工智能 监控
论文介绍:Masked-attention Mask Transformer (Mask2Former)——通用图像分割的新架构
【5月更文挑战第24天】Mask2Former,一种新型的图像分割架构,采用遮蔽注意力机制聚焦局部特征,提升模型收敛速度和性能,在COCO、Cityscapes等数据集上刷新记录。其元架构结合背景特征提取器、像素解码器和Transformer解码器,实现高效训练和性能提升。尽管在处理小对象和泛化能力上仍有局限,但Mask2Former为通用图像分割开辟了新路径。[链接](https://arxiv.org/abs/2112.01527)
1486 5
|
数据处理 数据库
SOH (Start of Header) - ASCII值1 (0x01)
SOH (Start of Header) - ASCII值1 (0x01)
3336 2
|
Java Maven
无法解析符号 ‘SpringBootApplication’
无法解析符号 ‘SpringBootApplication’
1461 1

热门文章

最新文章