基于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.rhkb.cn/news/252739.html

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

相关文章

【python】绘制春节烟花

一、Pygame库春节烟花示例 下面是一个使用Pygame实现的简单春节烟花效果的示例代码。请注意&#xff0c;运行下面的代码之前&#xff0c;请确保计算机上已经安装了Pygame库。 import pygame import random import math from pygame.locals import *# 初始化pygame pygame.ini…

颐和园龙纹珍宝展亮相,文物预防保护科技护航

在皇家园林颐和园的深处&#xff0c;一场独特的文化盛宴正静静上演。2月1日&#xff0c;“祥龙贺岁—颐和园藏龙纹题材文物特展”在德和园华丽揭幕。此次特展汇聚了66件珍贵文物&#xff0c;包括玉器、瓷器、书画、珐琅、家具等&#xff0c;每一件都是颐和园园藏的瑰宝。这些文…

Windows编程入门-窗口控件-资源操作

window控件&#xff1a; 控件是常见的窗口上的交互元素例如&#xff1a;一个按钮&#xff0c;一个复选框&#xff0c;一个列表框等。 当控件的特定功能被触发后&#xff0c;会主动发送消息通知父窗口&#xff0c;父窗口可以通过发送消息给控件控制控件的行为。 控件的本质是一个…

Java开发IntelliJ IDEA2023

IntelliJ IDEA 2023是一款强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;专为Java开发人员设计。它提供了许多特色功能&#xff0c;帮助开发人员更高效地编写、测试和调试Java应用程序。以下是一些IntelliJ IDEA 2023的特色功能&#xff1a; 智能代码编辑器&…

MQ,RabbitMQ,SpringAMQP的原理与实操

MQ 同步通信 异步通信 事件驱动优势&#xff1a; 服务解耦 性能提升&#xff0c;吞吐量提高 服务没有强依赖&#xff0c;不担心级联失败问题 流量消峰 ​ 小结: 大多情况对时效性要求较高&#xff0c;所有大多数时间用同步。而如果不需要对方的结果&#xff0c;且吞吐…

20240202在Ubuntu20.04.6下使用whisper.cpp的CPU模式

20240202在Ubuntu20.04.6下使用whisper.cpp的CPU模式 2024/2/2 14:15 rootrootrootroot-X99-Turbo:~/whisper.cpp$ ./main -l zh -osrt -m models/ggml-medium.bin chs.wav 在纯CPU模式下&#xff0c;使用medium中等模型&#xff0c;7分钟的中文视频需要851829.69 ms&#xf…

代码随想录 Leetcode51. N 皇后

题目&#xff1a; 代码(首刷看解析 2024年2月6日&#xff09;&#xff1a; class Solution { private:vector<vector<string>> res;void backtracking(int n, int row, vector<string>& chessboard) {if (row n) {res.push_back(chessboard);return;}f…

SpringBoot activemq收发消息、配置及原理

SpringBoot集成消息处理框架 Spring framework提供了对JMS和AMQP消息框架的无缝集成&#xff0c;为Spring项目使用消息处理框架提供了极大的便利。 与Spring framework相比&#xff0c;Spring Boot更近了一步&#xff0c;通过auto-configuration机制实现了对jms及amqp主流框架…

C++ 动态规划 状态压缩DP 最短Hamilton路径

给定一张 n 个点的带权无向图&#xff0c;点从 0∼n−1 标号&#xff0c;求起点 0 到终点 n−1 的最短 Hamilton 路径。 Hamilton 路径的定义是从 0 到 n−1 不重不漏地经过每个点恰好一次。 输入格式 第一行输入整数 n 。 接下来 n 行每行 n 个整数&#xff0c;其中第 i 行…

什么是TCP三次握手、四次挥手?

&#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是小徐&#x1f947;☁️博客首页&#xff1a;CSDN主页小徐的博客&#x1f304;每日一句&#xff1a;好学而不勤非真好学者 &#x1f4dc; 欢迎大家关注&#xff01; ❤️ 1、三次握手 你(客户端)给一个朋友(服务器)打电…

ERR_SSL_VERSION_OR_CIPHER_MISMATCH

我在namesilo买的域名&#xff0c;coludflare做的解析&#xff0c;华为云的SSL&#xff0c;用宝塔部署的SSL&#xff0c;访问https报错&#xff0c;http却正常&#xff1a; 报错&#xff1a;此网站无法提供安全连接www.hongkong.ioyunxin.top 使用了不受支持的协议。 ERR_SSL_…

机器学习 | 探索朴素贝叶斯算法的应用

朴素贝叶斯算法是一种基于贝叶斯定理和特征条件独立假设的分类算法。它被广泛应用于文本分类、垃圾邮件过滤、情感分析等领域&#xff0c;并且在实际应用中表现出色。 朴素贝叶斯法是基于贝叶斯定理与特征条件独立假设的分类方法&#xff1a; 1&#xff09;对于给定的待分类项r…

字节AIGC场景发力,云雀大模型+扣子智能体,快速构建专属AI应用

之前给大家推荐过类似的编排工具dify,今天给大家推荐的字节的这个产品&#xff0c;总体体验还是不错的。 第一步登录扣子 点击创建BOT-编排 创建插件 插件能够让 Bot 调用外部 API&#xff0c;例如搜索信息、浏览网页、生成图片等&#xff0c;扩展 Bot 的能力和使用场景。 我…

【宝藏系列】嵌入式入门概念大全

【宝藏系列】嵌入式入门概念大全 0️⃣1️⃣操作系统&#xff08;Operating System&#xff0c;OS&#xff09; 是管理计算机硬件与软件资源的系统软件&#xff0c;同时也是计算机系统的内核与基石。操作系统需要处理管理与配置内存、决定系统资源供需的优先次序、控制输入与输…

【Java程序设计】【C00246】基于Springboot的留守儿童爱心网站(有论文)

基于Springboot的留守儿童爱心网站&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的留守儿童爱心网站 本系统分为系统功能模块、管理员功能模块以及用户功能模块。 系统功能模块&#xff1a;系统首页的主要功能展…

我在项目中使用Redis的几个场景

目录 缓存 会话存储 分布式锁 消息队列 位统计 计数器 排行榜 缓存 缓存的目的是为了提高系统响应速度、减少数据库等资源的压力&#xff0c;redis作为键值对形式的内存数 据库&#xff0c;可以提供非常快速的读取速度&#xff0c;使得它成为存储热点数据或频繁访问数…

使用STM32 HAL库配置和控制外设接口

使用STM32 HAL库配置和控制外设接口非常简单&#xff0c;以下是一个示例&#xff0c;演示如何使用STM32 HAL库配置和控制USART外设接口。 ✅作者简介&#xff1a;热爱科研的嵌入式开发者&#xff0c;修心和技术同步精进 ❤欢迎关注我的知乎&#xff1a;对error视而不见 代码获取…

小白水平理解面试经典题目_二维数组类LeetCode 2966 Divide Array【排序算法实现】

2966 将数组划分为具有最大差值的数组 小白渣翻译&#xff1a; 给定一个大小为 n 的整数数组 nums 和一个正整数 k 。 将数组分成一个或多个大小为 3 的数组&#xff0c;满足以下条件&#xff1a; nums 的每个元素都应该位于一个数组中。一个数组中任意两个元素之间的差异小…

【力扣】两数之和,暴力枚举+哈希表

两数之和原题地址 方法一&#xff1a;暴力枚举 首先&#xff0c;我们需要枚举数组中所有可能的下标对组合&#xff0c;对于n个数的数组&#xff0c;从中选2个下标&#xff0c;有种可能。做法很简单&#xff0c;遍历数组中的所有元素&#xff0c;对于每一个元素&#xff0c;遍…

【数据开发】pyspark入门与RDD编程

【数据开发】pyspark入门与RDD编程 文章目录 1、pyspark介绍2、RDD与基础概念3、RDD编程3.1 Transformation/Action3.2 数据开发流程与环节 1、pyspark介绍 pyspark的用途 机器学习专有的数据分析。数据科学使用Python和支持性库的大数据。 spark与pyspark的关系 spark是一…