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


相关文章
|
关系型数据库 Java MySQL
【Sqlite】sqlite安装与与使用图文详解
【Sqlite】sqlite安装与与使用图文详解
361 0
freemarker中对null值的处理
官方文档 ​​​​​​FreeMarker 中文官方参考手册 (foofun.cn)
|
8月前
|
存储 弹性计算 人工智能
阿里云发票申请图文教程及常见问题解析
在购买完阿里云服务器或者其他云产品之后,如何申请发票成为了许多用户关注的焦点。尤其是对于初次购买阿里云服务器的用户来说,发票申请流程可能并不熟悉。本文将为大家详细介绍阿里云服务器购买之后如何申请发票,以及申请过程中可能遇到的常见问题,帮助大家轻松完成发票申请。
|
监控 安全 网络协议
|
JavaScript
Vue PDF预览(微信公众号,app也可用)
Vue PDF预览(微信公众号,app也可用)
517 0
|
11月前
|
存储 数据采集 数据可视化
认识DataHub:企业级数据管理的第一步
【10月更文挑战第23天】在数字化转型的时代,数据管理成为了企业发展的核心竞争力之一。如何高效地管理和利用海量数据,成为了每个企业都需要面对的问题。DataHub作为一款企业级数据管理平台,以其强大的功能和灵活的架构,为企业提供了一站式的数据管理解决方案。作为一名数据管理爱好者,我将从个人的角度出发,详细介绍DataHub的基本概念、主要功能、应用场景,以及为什么选择DataHub作为数据管理解决方案。此外,我还会提供简单的安装指南和快速入门教程,帮助初学者快速上手使用DataHub。
1218 1
|
编解码 测试技术 Python
【Python】已解决:UnicodeEncodeError: ‘ascii’ codec can’t encode characters in position 0-1: ordinal not i
【Python】已解决:UnicodeEncodeError: ‘ascii’ codec can’t encode characters in position 0-1: ordinal not i
2833 1
|
缓存 NoSQL 数据库
Web服务器与数据库优化:提升系统性能的最佳实践
【8月更文第28天】在现代的Web应用中,Web服务器与后端数据库之间的交互是至关重要的部分。优化这些组件及其相互作用可以显著提高系统的响应速度、吞吐量和可扩展性。本文将探讨几种常见的优化策略,并提供一些具体的代码示例。
355 1
|
前端开发 JavaScript C++
【绝技大公开】Webpack VS Rollup:一场前端工程化领域的巅峰对决,谁能笑到最后?——揭秘两大构建神器背后的秘密与奇迹!
【8月更文挑战第12天】随着前端技术的发展,模块化与自动化构建成为标准实践。Webpack与Rollup作为主流构建工具,各具特色。Webpack是一款全能型打包器,能处理多种静态资源,配置灵活,适合复杂项目;Rollup专注于ES6模块打包,利用Tree Shaking技术减少冗余,生成更精简的代码。Rollup构建速度快,配置简洁,而Webpack则拥有更丰富的插件生态系统。选择合适的工具需根据项目需求和个人偏好决定。两者都能有效提升前端工程化水平,助力高质量应用开发。
209 1
|
存储 关系型数据库 MySQL
MySQL删除索引的方法与注意事项
MySQL删除索引的方法与注意事项
1747 0