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

核心代码 

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

配置文件

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/455896.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【开源】基于JAVA+Vue+SpringBoot的课程案例资源库系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 管理员需求分析2.2 用户需求分析 三、系统设计3.1 业务流程设计3.1.1 管理员业务流程设计3.1.2 用户业务流程设计3.1.3 首页功能模块及业务流程分析3.1.4 案例资源中心功能模块及业务流程分析3.1.5 用户信息中心功能模块…

机器学习聚类算法

聚类算法是一种无监督学习方法&#xff0c;用于将数据集中的样本划分为多个簇&#xff0c;使得同一簇内的样本相似度较高&#xff0c;而不同簇之间的样本相似度较低。在数据分析中&#xff0c;聚类算法可以帮助我们发现数据的内在结构和规律&#xff0c;从而为进一步的数据分析…

【敏捷开发】关于敏捷开发的几点思考,推荐一些高效书籍一起学

【敏捷开发】关于敏捷开发的几点思考&#xff0c;推荐一些高效书籍 一、背景二、敏捷宣言三、极限编程四、如何进行敏捷&#xff1f;4.1 改变软件研制方式4.2 组件高效团队4.3 改善研制流程4.4 持续集成与交付 五、Scrum过程六、书籍推荐 一、背景 软件开发的未来一定是多变的…

归并排序

1 确定分界点 mid &#xff08;lr&#xff09;/2 2 递归排序left right 3 归并 合二为一 #include<bits/stdc.h> using namespace std; const int N1e910; int q[N],tmp[N],n;void merge_sort(int q[],int l,int r) {if(l>r)return;int midlr>>1;merge_sort(…

会C语言但是不懂电路应该怎么入门单片机呢?

会C语言但是不懂电路应该怎么入门单片机呢&#xff1f; 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「C语言的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Video媒体组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之Video媒体组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Video媒体组件 用于播放视频文件并控制其播放状态的组件。 子组件 无 接口…

算法学习——LeetCode力扣链表篇2

算法学习——LeetCode力扣链表篇2 24. 两两交换链表中的节点 24. 两两交换链表中的节点 - 力扣&#xff08;LeetCode&#xff09; 描述 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&…

高速接口PCB布局指南(二)通用高速信号布线

高速接口PCB布局指南&#xff08;二&#xff09;通用高速信号布线 1.PCB材料编织2.高速信号布线长度3.高速信号布线长度匹配4.高速信号参考平面 tips&#xff1a;资料主要来自网络&#xff0c;仅供学习使用。 1.PCB材料编织 在常见的 PCB 材料上为差分信号布线时&#xff0c;…

点燃设计之魂,展现艺术力量:NCDA邀你参赛!

未来设计师全国高校数字艺术设计大赛&#xff08;NCDA&#xff09;教育部中国高等教育协会认定&#xff0c;由工业和信息化部人才交流中心主办&#xff0c;教育部发文支持“学习强国”学习平台&#xff0c;与联合国国际大赛对接。比赛始于2012年&#xff0c;每年举行一次&#…

【Leetcode】LCP 30. 魔塔游戏

文章目录 题目思路代码结果 题目 题目链接 小扣当前位于魔塔游戏第一层&#xff0c;共有 N 个房间&#xff0c;编号为 0 ~ N-1。每个房间的补血道具/怪物对于血量影响记于数组 nums&#xff0c;其中正数表示道具补血数值&#xff0c;即血量增加对应数值&#xff1b;负数表示怪…

BUUCTF-Real-[ThinkPHP]IN SQL INJECTION

目录 漏洞描述 漏洞分析 漏洞复现 漏洞描述 漏洞发现时间&#xff1a; 2018-09-04 CVE 参考&#xff1a;CVE-2018-16385 最高严重级别&#xff1a;低风险 受影响的系统&#xff1a;ThinkPHP < 5.1.23 漏洞描述&#xff1a; ThinkPHP是一款快速、兼容、简单的轻量级国产P…

Redis服务

目录 介绍 特点 缓存 安装 安装单机版redis实例 1、创建工作目录 2、下载对应的redis包 3、解压到创建好的工作目录 4、安装编译工具 5、进入解压后的目录执行make编译 6、配置环境变量 7、备份配置文件 8、修改配置文件 9、创建存放数据的目录 配置redis为syste…