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

news2024/10/7 8:22:51

核心代码 

<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.coloradmin.cn/o/1434323.html

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

相关文章

基于抖音小程序实现的答题小程序

看过《一站到底》后&#xff0c;不仅学到了很多新知识&#xff0c;还感受到了选手们的聪明才智和对知识的热爱。同时&#xff0c;也意识到自己的知识储备还有很大的提升空间&#xff0c;因此我会继续努力学习&#xff0c;提高自己的知识水平。 《一站到底》是一档益智答题类节…

Leetcode刷题笔记题解(C++):1863. 找出所有子集的异或总和再求和

思路如下&#xff1a;递归思路&#xff0c;依次遍历数组中的数&#xff0c;当前数要不要选择像二叉树一样去遍历如下图所示 0 0 &#xff08;选5&#xff09; 5&#xff08;不选5&#xff09; 0 1 0 1 0 6 …

[word] 怎么删除文字底纹 #职场发展#其他

怎么删除文字底纹 怎么删除文字底纹?我们在录入文字到文档的时候&#xff0c;或者是复制网上内容时&#xff0c;都会带有格式&#xff0c;有时候还会遇到删除不掉的问题。今天给大家分享小技巧&#xff0c;解决你的问题。 1、删除文字底纹 文档自带的底纹&#xff0c;删除技…

Mysql连接编译踩坑问题

复习下mysql基本命令 登录mysql mysql #没密码登录 mysql -u root -p #以用户名root 需要交互输入密码方式登录显示所有数据库 SHOW DATABASES&#xff1b; 使用某个数据库 use database_name; 查看当前数据库某一张表的表结构 DESCRIBE table_name; 解决一个mysql 用…

FPGA高端项目:解码索尼IMX327 MIPI相机转USB3.0 UVC 输出,提供FPGA开发板+2套工程源码+技术支持

目录 1、前言免责声明 2、相关方案推荐我这里已有的 MIPI 编解码方案 3、本 MIPI CSI-RX IP 介绍4、个人 FPGA高端图像处理开发板简介5、详细设计方案设计原理框图IMX327 及其配置MIPI CSI RX图像 ISP 处理图像缓存UVC 时序USB3.0输出架构FPGA逻辑设计工程源码架构SDK软件工程源…

LeetCode、746. 使用最小花费爬楼梯【简单,动态规划 线性DP】

文章目录 前言LeetCode、746. 使用最小花费爬楼梯【简单&#xff0c;动态规划 线性DP】题目与分类思路 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客之星、阿里云平台优质作者、专注于Java后端技术领域。…

VPN 虚拟专用网、VPN类型

1 虚拟专用网 VPN&#xff08;Virtual Private Network&#xff09; 利用公用互联网作为本机构各专用网之间的通信载体&#xff0c;这样的专用网又称为虚拟专用网 VPN (Virtual Private Network)。 专用网&#xff1a;指这种网络是为本机构的主机用于机构内部的通信&#xff…

塑料管道市场分析:行业利润率仅为5.57%

塑料和塑料管道行业组织的“掌门人”不约而同地将我国塑料管道行业的发展定义为“机遇与挑战并存”&#xff0c;而且都将抓住机遇的关键词指向了“高质量”&#xff0c;认为我国塑料管道行业必须“面对新局&#xff0c;创新突破&#xff0c;坚定高质量发展之路” 近两年来&…

day32 买卖股票的最佳时机Ⅱ 跳跃游戏 跳跃游戏Ⅱ

题目1&#xff1a;122 买卖股票的最佳时机Ⅱ 题目链接&#xff1a;122 买卖股票的最大时机Ⅱ 题意 整数数组prices[i]表示某股票的第i天的价格&#xff0c;每天可买卖股票且最多持有1股股票&#xff0c;返回最大利润 利润拆分&#xff0c;拆分为每天的利润 每天的正利…

浅谈交换原理(1)——概述

一、什么是交换 在通信系统中&#xff0c;我们所认知的最简单的通信方式就是点对点通信&#xff0c;但是当有多个终端需要进行相互通信时&#xff0c;点对点通信就具有一定的局限性&#xff0c;如下图所示&#xff1a; 我们如果想要做到全互连方式两两相连&#xff0c;假设终端…

测试环境搭建整套大数据系统(二:安装jdk,mysql)

一&#xff1a;安装JDK 参考 https://blog.csdn.net/weixin_43446246/article/details/123328558 二&#xff1a;安装mysql 1.因为我们安装cdh6.3.2。cdh支持的是5.6和5.7版本的mysql。 2. 步骤 wget https://downloads.mysql.com/archives/get/p/23/file/mysql-server_5.7.…

SpringCloud--Eureka注册中心服务搭建注册以及服务发现

注意springboot以及springcloud版本&#xff0c;可能有莫名其妙的错误&#xff0c;这里使用的是springboot-2.6.13&#xff0c;springcloud-2021.0.5 一&#xff0c;Eureka-Server搭建&#xff1a; 1.创建项目&#xff1a;引入依赖 <dependency><groupId>org.sp…

什么是跨境电商?跨境电商与api的关系是什么?

什么是跨境电商&#xff1f; 跨境电商是指通过互联网平台进行国际贸易的商业模式。它允许消费者在不同国家之间购买和销售商品&#xff0c;打破了传统贸易的地域限制&#xff0c;为消费者提供了更多选择和便利。 什么是跨境电商API&#xff1f; 跨境电商API通常指的是应用程…

MOS管驱动电流估算-Qg参数

MOS管驱动电流估算 例&#xff1a;FDH45N50F如下参数&#xff1a; 有人可能会这样计算&#xff1a; 开通电流 带入数据得 关断电流 带入数据得 于是乎得出这样的结论&#xff0c;驱动电流只需 250mA左右即可。仔细想想这样计算对吗&#xff1f; 这里必须要注意这样一个条件细…

构造回文数组

目录 原题描述&#xff1a; 题目描述 时间&#xff1a;1s 空间&#xff1a;256M 题目描述&#xff1a; 输入格式&#xff1a; 输出格式&#xff1a; 样例1输入&#xff1a; 样例1输出&#xff1a; 样例2输入&#xff1a; 样例2输出&#xff1a; 约定&#xff1a; 作…

VC++添加菜单学习

新建一个单文档工程&#xff1b; 完成以后看一下有没有出现如下图的 资源视图 的tab&#xff1b;如果没有&#xff0c;在文件列表中找到xxx.rc2文件&#xff1b; 点击 资源视图 的tab&#xff0c;或者双击 .rc2 文件名&#xff0c;就会转到如下图的资源视图&#xff1b;然后展…

【网页设计】春节页面背景模板

无偿下载地址&#xff1a;https://download.csdn.net/download/weixin_47040861/88811143 1.实现效果 2.代码 1.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content&q…

mac下载工具:JDownloader 2 for Mac 中文版

JDownloader是一款开源的下载管理工具&#xff0c;主要使用Java编程语言开发&#xff0c;因此它能够在支持Java的操作系统上运行&#xff0c;包括Windows、Linux和Mac OS。这款软件专门为那些需要通过网盘下载文件的用户提供便利&#xff0c;它支持众多流行的网盘服务&#xff…

2.STL源码解析-空间配置器

2.STL源码解析-空间配置器alloc 空间配置器就是给容器分配空间的。像我们平时使用new和delete动态分配释放对象内存一样。空间配置器也封装了这些功能。但是STL的空间配置器不仅仅只简单调用分配空间&#xff0c;它在一些地方都做了优化来提升性能。 构造和析构 我们在调用n…

AI工具有哪些?国内4款主流的AI软件盘点推荐!

去年以GPT为代表的AI对话软件&#xff0c;再一次引发了人们对人工智能的关注和讨论&#xff0c;从小博自己的观察看&#xff0c;人们对AI工具持有3种态度—— “看不懂”&#xff1a;AI工具是一种新事物&#xff0c;但和自己的工作或所在的行业无关&#xff0c;不想在这上面花…