基于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.mzph.cn/news/670767.shtml

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

相关文章

外汇天眼:外汇中的“直接套汇”是指什么?

外汇中的直接套汇又称地点套汇和两角套汇&#xff0c;由于两间汇率高低不同&#xff0c;同时在两个市场上买贱卖贵&#xff0c;从中赚取汇率差额。 例如&#xff1a;英镑的价格在伦敦较贵&#xff0c;或者说英镑在纽约就较便宜&#xff0c;而美元的价值在伦敦较便宜&#xff0c…

硬核:C++实现一个简单的图形用户界面(GUI),包括按钮、文本框和标签等控件

使用Qt库实现简单GUI的示例&#xff1a; #include <QtWidgets>int main(int argc, char** argv) {QApplication app(argc, argv);// 创建一个窗口QWidget window;// 创建一个标签控件QLabel* label new QLabel("Hello World", &window);// 创建一个文本框…

计算机毕业设计 | SpringBoot大型旅游网站 旅行后台管理系统(附源码)

1&#xff0c; 概述 1.1 项目背景 随着互联网技术的快速发展和普及&#xff0c;旅游行业逐渐转向线上&#xff0c;越来越多的游客选择在线预订旅游产品。传统的线下旅行社模式已不能满足市场需求&#xff0c;因此&#xff0c;开发一个高效、便捷的旅游网站成为行业的迫切需求…

算法-2-异或运算

按位异或&#xff1a;相同为0&#xff0c;不同为1 异或运算性质 1&#xff09;异或运算就是无进位相加&#xff08;ab写二进制形式每位相加时不进位&#xff09; 2&#xff09;异或运算满足交换律、结合律&#xff0c;也就是同一批数字&#xff0c;不管异或顺序是什么&#…

【Spring连载】使用Spring Data访问Redis(七)----Hash Mapping

【Spring连载】使用Spring Data访问Redis&#xff08;七&#xff09;----Hash Mapping 一、Hash Mappers二、Jackson2HashMapper 你可以使用Redis中的各种数据结构来存储数据。Jackson2JsonRedisSerializer可以转换JSON格式的对象。理想情况下&#xff0c;通过使用plain键&…

Stable Diffusion 模型下载:majicMIX lux 麦橘辉耀 - V3

文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十 下载地址 模型介绍 非常推荐的一个非常绚丽的科幻、梦幻、玄幻般的大模型&#xff0c;由国人“Merjic”发布&#xff0c;下载量颇高。这个模型风格炸裂&#xff0c;远距离脸部需要inp…

071:vue中过滤器filters的使用方法(图文示例)

第071个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使用&#xff0c;computed&a…

Java接口与抽象类

接口 定义 Java中的接口是一种抽象类型&#xff0c;用于定义一组规范或行为。接口允许我们定义一组方法&#xff0c;这些方法没有具体的实现&#xff0c;而是由实现接口的类来提供具体的实现。 语法&#xff1a;接口的声明使用interface关键字&#xff0c;后面跟上接口的名称…

gem5学习(17):ARM功耗建模——ARM Power Modelling

目录 一、Dynamic Power States 二、Power Usage Types 三、MathExprPowerModels 四、Extending an existing simulation 五、Stat dump frequency 六、Common Problems 官网教程&#xff1a;gem5: ARM Power Modelling 通过使用gem5中已记录的各种统计数据&#xff0c;…

ag-Grid:对数据变化的单元格进行高亮显示

问:ag-grid 当 rowData 数据变化,如何对数据变化的党员个进行高亮? 解析: 在ag-Grid中,想要对数据变化的单元格进行高亮显示,你可以使用以下步骤来实现: 监听数据变化:首先,你需要监听rowData的变化。这可以通过在你的组件中观察rowData属性的变化来实现,或者如果你…

复杂docker 问题一

一、如何清理无用的Docker镜像和容器&#xff1f; 在使用Docker的过程中&#xff0c;随着时间的推移&#xff0c;系统中可能会积累很多不再使用或过时的镜像、停止的容器、无用的数据卷和网络等&#xff0c;这些资源占用了磁盘空间并可能导致性能下降。因此&#xff0c;定期清…

go 切面 AOP 实现

go AOP 实现 使用Go语言的反射机制和函数类型实现AOP&#xff0c;通过在需要切入的函数前后添加额外的逻辑代码实现AOP package mainimport ("errors""fmt""log""reflect" )// User 结构体表示一个用户 type User struct {ID intN…

《动手学深度学习(PyTorch版)》笔记7.4

注&#xff1a;书中对代码的讲解并不详细&#xff0c;本文对很多细节做了详细注释。另外&#xff0c;书上的源代码是在Jupyter Notebook上运行的&#xff0c;较为分散&#xff0c;本文将代码集中起来&#xff0c;并加以完善&#xff0c;全部用vscode在python 3.9.18下测试通过&…

闲聊电脑(5)装个 Windows(一)

​夜深人静&#xff0c;万籁俱寂&#xff0c;老郭趴在电脑桌上打盹&#xff0c;桌子上的小黄鸭和桌子旁的冰箱又开始窃窃私语…… 小黄鸭&#xff1a;冰箱大哥&#xff0c;上次说到硬盘分区和格式化&#xff0c;弄完之后&#xff0c;就该装系统了吧&#xff1f; 冰箱&#x…

Web课程学习笔记--CSS选择器的分类

CSS 选择器的分类 基本规则 通过 CSS 可以向文档中的一组元素类型应用某些规则 利用 CSS&#xff0c;可以创建易于修改和编辑的规则&#xff0c;且能很容易地将其应用到定义的所有文本元素 规则结构 每个规则都有两个基本部分&#xff1a;选择器和声明块&#xff1b;声明块由一…

算法:最小循环子数组

一、算法描述 给定一个由若干整数组成的数组nums&#xff0c;请检查数组是否是由某个子数组重复循环拼接而成&#xff0c;请输出这个最小的子数组。 输入描述 第一行输入数组中元素个数n&#xff0c;1 < n < 100000 第二行输入数组的数字序列nums&#xff0c;以空格分割&…

力扣(leetcode)第448题找到所有数组中消失的数字(Python)

448.找到数组中消失的数字 题目链接&#xff1a;448.找到数组中消失的数字 给你一个含 n 个整数的数组 nums &#xff0c;其中 nums[i] 在区间 [1, n] 内。请你找出所有在 [1, n] 范围内但没有出现在 nums 中的数字&#xff0c;并以数组的形式返回结果。 示例 1&#xff1a; …

JVM性能调优 - 服务器性能排查(7)

在排查生产环境的性能问题时,以下是一些常见的步骤和技巧: 监控系统资源:使用系统监控工具(如top、htop、nmon等)来监控服务器的CPU使用率、内存使用率、磁盘IO等系统资源情况。这可以帮助你了解系统的整体负载情况,是否存在资源瓶颈。 分析日志:查看应用程序的日志文件…

Docker安装ElasticSearch/ES 7.10.0

目录 前言安装ElasticSearch/ES安装步骤1&#xff1a;准备1. 安装docker2. 搜索可以使用的镜像。3. 也可从docker hub上搜索镜像。4. 选择合适的redis镜像。 安装步骤2&#xff1a;拉取ElasticSearch镜像1 拉取镜像2 查看已拉取的镜像 安装步骤3&#xff1a;创建容器创建容器方…

【Rust】字符串,看这篇就够了

这节课我们把字符串单独拿出来讲&#xff0c;是因为字符串太常见了&#xff0c;甚至有些应用的主要工作就是处理字符串。比如 Web 开发、解析器等。而 Rust 里的字符串内容相比于其他语言来说还要多一些。是否熟练掌握 Rust 的字符串的使用&#xff0c;对 Rust 代码开发效率有很…