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

 核心代码 

<template></template>
<script>
export default {
  created() {
    //监听弹起快捷键
    addEventListener("keyup", this.keyup);
  },
  destroyed(d) {
    //移除监听弹起快捷键
    removeEventListener("keyup", this.keyup);
  },
  methods: {
    keyup(e) {
      if (e.key === this.$global.version.key) {
        ++this.$global.version.keyupTimes >= this.$global.version.maxTimes &&
          this.$global.version.multiKeyPressCallback();
        this.$global.version.keyupTimes === 1 &&
          setTimeout(
            () => (this.$global.version.keyupTimes = 0),
            1000 * this.$global.version.delaySecond
          );
        e.stopPropagation();
        e.preventDefault();
        return false;
      }
    },
  },
};
</script>

配置文件

export default {

    version: {
        time: "2024年2月6日 17:30:03", //版本时间(长按Pause Break五秒显示)
        key: "F1", //触发快捷键
        multiKeyPressCallback(d) {
            alert(`【更新时间】${this.time}\n(注意校对是否已发布最新代码)`);
        }, //长按结束触发方法
        delaySecond: 3, //多少秒内连续按键
        keyupTimes: 0, //当前按键次数
        maxTimes: 5, //连续按键次数
    },

}

关联长按键盘任意键或组合键

基于Vue2用keydown、keyup事件实现长按键盘任意键(或组合键)3秒触发自定义事件(以F1键为例)-CSDN博客文章浏览阅读101次。【代码】基于Vue2用keydown、keyup事件实现长按键盘任意键(或组合键)3秒触发自定义事件(以Pause/Break键为例)https://blog.csdn.net/qq_37860634/article/details/136047189

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ES节点故障的容错方案

ES节点故障的容错方案 1. es启动加载逻辑1.1 segment和translg组成和分析1.2 es节点启动流程1.3 es集群的初始化和启动过程 2. master高可用2.1 选主逻辑2.1.1 过滤选主的节点列表2.1.2 Bully算法2.1.2 类Raft协议2.1.3 元数据合并 2.2 HA切换 3. 分片高可用3.1 集群分片汇报3.…

2.0 Zookeeper 安装配置

Linux 安装 zookeeper 下载地址为: Apache ZooKeeper。 选择一稳定版本&#xff0c;本教程使用的 release 版本为3.4.14&#xff0c;下载并安装。 打开网址 https://www.apache.org/dyn/closer.lua/zookeeper/zookeeper-3.4.14/zookeeper-3.4.14.tar.gz&#xff0c;看到如下界…

HTTP1.1、HTTP2、HTTP3

HTTP1.1 HTTP/1.1 相比 HTTP/1.0 性能上的改进&#xff1a; 使用长连接的方式改善了 HTTP/1.0 短连接造成的性能开销。支持管道&#xff08;pipeline&#xff09;网络传输&#xff0c;只要第一个请求发出去了&#xff0c;不必等其回来&#xff0c;就可以发第二个请求出去&…

函数的连续与间断【高数笔记】

【连续】 分类&#xff0c;分几个&#xff1f;每类特点&#xff1f; 连续条件&#xff0c;是同时满足还是只需其一&#xff1f; 【间断】 分类&#xff0c;分几个大类&#xff0c;又分几个小类&#xff1f;每类特点&#xff1f; 间断条件&#xff0c;是同时满足还是只需其一&am…

Msql-数据库死锁

实验案例 CREATE TABLE t1_deadlock ( id int(11) NOT NULL, name varchar(100) DEFAULT NULL, age int(11) NOT NULL, address varchar(255) DEFAULT NULL, PRIMARY KEY (id), KEY idx_age (age) USING BTREE, KEY idx_name (name) USING BTREE ) ENGINEInnoDB DEFAULT CHARS…

Unity类银河恶魔城学习记录1-14 AttackDirection源代码 P41

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili PlayerPrimaryAttackState.cs using System.Collections; using System.Co…

计算机毕业设计 | SSM 医药信息管理系统(附源码)

1&#xff0c; 概述 1.1 课题背景 本系统由说书客面向广大民营药店、县区级医院、个体诊所等群体的药品和客户等信息的管理需求&#xff0c;采用SpringSpringMVCMybatisEasyui架构实现&#xff0c;为单体药店、批发企业、零售连锁企业&#xff0c;提供有针对性的信息数据管理…

OPC UA 信息模型云库简介

OPC基金会宣布推出与清洁能源和智能制造创新研究所&#xff08;CESMII&#xff09;共同开发的全球可用的UA云库。凭借其多云架构&#xff0c;UA 云库见证了所有主要云供应商利用开放接口的贡献&#xff0c;并可用于共享、查找和协作 OPC UA 信息模型。如今&#xff0c;UA云库已…

vue2.0+使用md-edit编辑器

前言&#xff1a;小刘开发过程中&#xff0c;如果是博客项目一般是会用到富文本。众多富文本中&#xff0c;小刘选择了markdown&#xff0c;并记录分享了下来。 # 使用 npm npm i kangc/v-md-editor -Smain.js基本配置import VueMarkdownEditor from kangc/v-md-editor; import…

【AI绘画+Midjourney平替】Fooocus:图像生成、修改软件(Controlnet原作者重新设计的UI+Windows一键部署)

代码&#xff1a;https://github.com/lllyasviel/Fooocus windows一键启动包下载&#xff1a;https://github.com/lllyasviel/Fooocus/releases/download/release/Fooocus_win64_2-1-831.7z B站视频教程&#xff1a;AI绘画入门神器&#xff1a;Fooocus | 简化SD流程&#xff0c…

国内唯一!通义灵码入选全球智能编码助手使用率 TOP 榜单

近日&#xff0c;在国内知名科技媒体 InfoQ 研究中心发布的《中国软件技术发展洞察和趋势预测报告 2024》中提到&#xff0c;随着 AI 和大模型技术的普及&#xff0c;开发者智能编码助手的使用习惯已经养成&#xff0c;其中&#xff0c;开发者使用的智能编码助手产品使用率超过…

【网络安全】URL解析器混淆攻击实现ChatGPT账户接管、Glassdoor服务器XSS

文章目录 通配符URL解析器混淆攻击实现ChatGPT账户接管通配符URL解析器混淆攻击实现Glassdoor服务器缓存XSS 本文不承担任何由于传播、利用本文所发布内容而造成的任何后果及法律责任。 本文将基于ChatGPT及Glassdoor两个实例阐发URL解析器混淆攻击。 开始本文前&#xff0c;…

SpringCloud-搭建Nacos服务中心

Nacos 是一个开源的动态服务发现、配置管理和服务管理平台。它支持多种服务发现协议&#xff0c;包括基于 DNS 和 HTTP 的服务发现。Nacos 提供了强大的配置管理和服务发现功能&#xff0c;使得在微服务架构中轻松实现服务注册、发现和配置管理成为可能。在本篇博客中&#xff…

亚信安慧AntDB推动数据库自主可控

亚信安慧AntDB正致力于验证数据库软硬件全自主可控的可行性&#xff0c;并将其应用于运营商核心的交易场景&#xff0c;以替代国外商业解决方案。为了实现这一目标&#xff0c;亚信安慧AntDB的研发团队不断进行技术创新和实践探索。 该数据库以自主研发的技术为基础&#xff0…

在 CentOS 7上使用 Apache 和 mod_wsgi 部署 Django 应用的方法

简介 Django 是一个强大的 Web 框架&#xff0c;可以帮助您快速启动 Python 应用程序或网站。Django 包括一个简化的开发服务器&#xff0c;用于在本地测试代码&#xff0c;但对于任何与生产相关的事情&#xff0c;都需要一个更安全和功能强大的 Web 服务器。 在本指南中&…

GPTs保姆级教程之实践

GPTs什么 使用GPTs的前提&#xff1a;ChatGPT Plus帐号 GTPs的作用&#xff1a;把我们和GPT对话的prompt&#xff0c;封装起来成为一个“黑匣子”。 主要有两个作用&#xff1a; 1、避免反复输入prompt&#xff0c;“黑匣子”打开&#xff0c;输入问题即可使用 2、在别人可以…

爬虫实战--人民网

文章目录 前言发现宝藏 前言 为了巩固所学的知识&#xff0c;作者尝试着开始发布一些学习笔记类的博客&#xff0c;方便日后回顾。当然&#xff0c;如果能帮到一些萌新进行新技术的学习那也是极好的。作者菜菜一枚&#xff0c;文章中如果有记录错误&#xff0c;欢迎读者朋友们…

npm 上传一个自己的应用(3) 在项目中导入及使用自己上传到NPM的工具

上文 npm 上传一个自己的应用(2) 创建一个JavaScript函数 并发布到NPM 我们创建了一个函数 并发上了npm 最后 我们这里 我们可以看到它的安装指令 这里 我们可以打开一个vue项目 终端输入 我们的安装指令 npm i 自己的包 如下代码 npm i grtest我们在 node_modules目录 下…

手拉手Vue3+vite引入echarts

技术栈springboot3hutool-alloshi-coreVue3viteechartsTailwindCSS软件版本IDEAIntelliJ IDEA 2022.2.1JDK17Spring Boot3.1hutool-all5.8.18oshi-core6.4.1Vue35.0.10vite5.0.10axios1.6.7echarts5.4.3 ECharts是一个使用 JavaScript 实现的开源可视化库&#xff0c;可以流畅…

苹果手机如何录屏?这里告诉你答案!

苹果公司的iPhone以其卓越的性能和用户体验受到了全球消费者的喜爱&#xff0c;而录屏功能作为手机的一项重要功能&#xff0c;能够帮助我们记录手机屏幕上的操作&#xff0c;分享游戏技巧、制作教程视频等。本文将为您介绍苹果手机如何录屏&#xff0c;帮助您更好地掌握录屏技…