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

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

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

算法-2-异或运算

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

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…

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

《动手学深度学习(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;以空格分割&…

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 代码开发效率有很…

基于OpenCV灰度图像转GCode的单向扫描实现

基于OpenCV灰度图像转GCode的单向扫描实现 引言单向扫描存在的问题灰度图像单向扫描代码示例结论 系列文章 ⭐深入理解G0和G1指令&#xff1a;C中的实现与激光雕刻应用⭐基于二值化图像转GCode的单向扫描实现⭐基于二值化图像转GCode的双向扫描实现⭐基于二值化图像转GCode的…

安装newman显示required node version >=16解决办法

直接安装对应版本就行&#xff0c;我的Node.js是14.16.0的版本&#xff0c;newman安装5.2.2的就不会出错。 npm install -g newman5.2.2

linux centos安装neofetch

简介 neofetch是一个命令行工具&#xff0c;可以用来显示系统的基本信息和硬件配置。它支持多种操作系统&#xff0c;包括Linux、macOS和Windows等。 安装 增加yum源 curl -o /etc/yum.repos.d/konimex-neofetch-epel-7.repo https://copr.fedorainfracloud.org/coprs/konime…

WebSocket相关问题

1.WebSocket是什么&#xff1f;和HTTP的区别&#xff1f; WebSocket是一种基于TCP连接的全双工通信协议&#xff0c;客户端和服务器仅需要一次握手&#xff0c;两者之间就可以创建持久性的连接&#xff0c;并且支持双向数据的传输。WebSocket和HTTP都是基于TCP的应用层协议&am…

【pikachu csrf】

cxrf 个人理解getPOST 个人理解 当被攻击用户登陆访问网站时&#xff0c;在保持登陆状态时点击小黑子&#xff08;黑客&#xff09;搭建的恶意链接而导致用户受到攻击。 举个例子 我去攻击网站&#xff0c;但是我找不到漏洞&#xff0c;这个时候我注册一个账号&#xff0c;发现…

数据分析基础之《pandas(5)—文件读取与存储》

一、概述 1、我们的数据大部分存在于文件当中&#xff0c;所以pandas会支持复杂的IO操作&#xff0c;pandas的API支持众多文件格式&#xff0c;如CSV、SQL、XLS、JSON、HDF5 二、CSV 1、读取csv文件 read_csv(filepath_or_buffer, sep,, delimiterNone) 说明&#xff1a; fi…

vmware网络配置,VMware的三种网络模式详解与配置

vmware为我们提供了三种网络工作模式 vmware为我们提供了三种网络工作模式, 它们分别是: Bridged&#xff08;桥接模式&#xff09;、NAT&#xff08;网络地址转换模式&#xff09;、Host-Only&#xff08;仅主机模式&#xff09;。 VMware虚拟机的三种网络类型的适用场景如下…