当前位置: 首页 > news >正文

监听键盘事件vue3封装hooks

监听页面键盘事件,执行对应方法

使用第三方API:vueuse

我封装的:

1. useKeyboardEvent.ts

import { useMagicKeys } from '@vueuse/core'export function enterKey(f: Function) {const { enter } = useMagicKeys()watch(enter, v => {if (v) {f()}})
}

2. 页面使用

import { enterKey } from '@/hooks/useKeyboardEvent'
enterKey(handleQuery)
function handleQuery() {...
}

前端大佬封装的:

1. useKeyboardEvent.ts

import { useMagicKeys, whenever } from '@vueuse/core'export function useKeys(keysMap: Record<string, Function>) {const magicKeys = useMagicKeys()Object.keys(keysMap).forEach(key => {whenever(magicKeys[key], () => keysMap[key]())})
}

2. 页面使用

import { useKeys } from '@/hooks/useKeyboardEvent'function handleQuery() {...
}
useKeys({ enter: handleQuery })

大佬封装的扩展性就很强,啥都不说了,膜拜大佬

相关文章:

监听键盘事件vue3封装hooks

监听页面键盘事件&#xff0c;执行对应方法 使用第三方API&#xff1a;vueuse 我封装的&#xff1a; 1. useKeyboardEvent.ts import { useMagicKeys } from vueuse/coreexport function enterKey(f: Function) {const { enter } useMagicKeys()watch(enter, v > {if (…...

Java Stream简化代码

使用原始流以获得更好的性能 使用 int、long 和 double 等基本类型时&#xff0c;请使用IntStream、LongStream 和 DoubleStream 等基本流&#xff0c;而不是 Integer、Long 和 Double 等装箱类型流。原始流可以通过避免装箱和拆箱的成本来提供更好的性能。 var array new i…...

py爬虫入门笔记(request.get的使用)

文章目录 Day11. 了解浏览器开发者工具2. Get请求http://baidu.com3. Post请求https://fanyi.baidu.com/sug4. 肯德基小作业 Day21. 正则表达式2. 使用re模块3. 爬取豆瓣电影Top250的第一页4. 爬取豆瓣电影Top250所有的250部电影信息 Day31. xpath的使用2. 认识下载照片线程池的…...

openssl3.2 - 官方demo学习 - encode - rsa_encode.c

文章目录 openssl3.2 - 官方demo学习 - encode - rsa_encode.c概述笔记END openssl3.2 - 官方demo学习 - encode - rsa_encode.c 概述 命令行参数 server_priv_key.pem client_priv_key.pem 这2个证书是前面certs目录里面做的 官方这个程序有bug, 给出2个证书, 还要从屏幕上输…...

Day03

今日任务 链表理论基础203.移除链表元素707.设计链表206.反转链表 链表理论基础 1&#xff09;单链表 单链表中的指针域只能指向节点的下一个节点 2&#xff09;双链表 双链表&#xff1a;每一个节点有两个指针域&#xff0c;一个指向下一个节点&#xff0c;一个指向上一个…...

adb 常用命令汇总

目录 adb 常用命令 1、显示已连接的设备列表 2、进入设备 3、安装 APK 文件到设备 4、卸载指定包名的应用 5、从设备中复制文件到本地 6、将本地文件复制到设备 7、查看设备日志信息 8、重启设备 9、截取设备屏幕截图 10、屏幕分辨率 11、屏幕密度 12、显示设备的…...

ubuntu 2022.04 安装vcs2018和verdi2018

主要参考网站朋友们的作业。 安装时参考&#xff1a; ubuntu18.04安装vcs、verdi2018_ubuntu安装vcs-CSDN博客https://blog.csdn.net/qq_24287711/article/details/130017583 编译时参考&#xff1a; 【ASIC】VCS报Error-[VCS_COM_UNE] Cannot find VCS compiler解决方法_e…...

品牌推广与情绪价值的深度结合:市场大局下的新趋势与“准”原则

随着社会经济的快速发展和消费者心理的复杂化&#xff0c;品牌推广已经不再是单一的信息传递&#xff0c;而是一个与消费者建立情感连接、传达品牌价值的过程。在这个过程中&#xff0c;情绪价值起到了至关重要的作用。它不仅影响着消费者的购买决策&#xff0c;更是品牌与消费…...

React16源码: React中的不同的expirationTime的源码实现

不同的 expirationTime 1 &#xff09;概述 在React中不仅仅有异步任务大部分情况下都是同步的任务&#xff0c;所以会有不同 expirationTime 的存在 2 &#xff09;种类 A. Sync 模式&#xff0c;优先级最高 任务创建完成之后&#xff0c;立马更新到真正的dom里面是一个创建…...

TRB 2024论文分享:基于生成对抗网络和Transformer模型的交通事件检测混合模型

TRB&#xff08;Transportation Research Board&#xff0c;美国交通研究委员会&#xff0c;简称TRB&#xff09;会议是交通研究领域知名度最高学术会议之一&#xff0c;近年来的参会人数已经超过了2万名&#xff0c;是参与人数和国家最多的学术盛会。TRB会议几乎涵盖了交通领域…...

Golang 打包

构建/打包 使用 Go 的构建命令&#xff1a; go build在包含 main 函数的包的目录下执行&#xff0c;它会生成一个可执行文件。文件名默认与包所在的目录名相同&#xff0c;但也可以使用 -o 选项来指定输出的文件名 交叉编译 Windows 环境下进行交叉编译以构建其他平台的可执…...

力扣每日一练(24-1-14)

做过类似的题&#xff0c;一眼就是双指针&#xff0c;刚好也就是题解。 if not nums:return 0p1 0 for p2 in range(1, len(nums)):if nums[p2] ! nums[p1]:p1 1nums[p1] nums[p2]return p1 1 根据规律&#xff0c;重复的数字必定相连&#xff0c;那么只要下一个数字与上一…...

K 个一组翻转链表(链表反转,固定长度反转)(困难)

优质博文&#xff1a;IT-BLOG-CN 一、题目 给你链表的头节点head&#xff0c;每k个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是k的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。…...

Spring Boot - 利用Resilience4j-RateLimiter进行流量控制和服务降级

文章目录 Resilience4j概述Resilience4j官方地址Resilience4j-RateLimiter微服务演示Payment processorPOM配置文件ServiceController Payment servicePOMModelServiceRestConfigController配置验证 探究 Rate Limiting请求三次 &#xff0c;观察等待15秒连续访问6次 Resilienc…...

概率论与数理统计————1.随机事件与概率

一、随机事件 随机试验&#xff1a;满足三个特点 &#xff08;1&#xff09;可重复性&#xff1a;可在相同的条件下重复进行 &#xff08;2&#xff09;可预知性&#xff1a;每次试验的可能不止一个&#xff0c;事先知道试验的所有可能结果 &#xff08;3&#xff09;不确定…...

【生存技能】git操作

先下载git https://git-scm.com/downloads 我这里是win64&#xff0c;下载了相应的直接安装版本 64-bit Git for Windows Setup 打开git bash 设置用户名和邮箱 查看设置的配置信息 获取本地仓库 在git bash或powershell执行git init&#xff0c;初始化当前目录成为git仓库…...

docker 将镜像打包为 tar 包

目录 1 实现 1 实现 要将镜像导出为.tar包&#xff0c;可以使用Docker命令行工具进行操作。下面是导出镜像的步骤&#xff1a; 首先&#xff0c;使用以下命令列出当前系统上的镜像&#xff0c;并找到要导出的镜像的ID或名称&#xff1a; docker images使用以下命令将镜像导出为…...

341. 最优贸易(dp思想运用,spfa,最短路)

341. 最优贸易 - AcWing题库 C 国有 n 个大城市和 m 条道路&#xff0c;每条道路连接这 n 个城市中的某两个城市。 任意两个城市之间最多只有一条道路直接相连。 这 m 条道路中有一部分为单向通行的道路&#xff0c;一部分为双向通行的道路&#xff0c;双向通行的道路在统计…...

FineBI实战项目一(19):每小时订单笔数分析开发

点击新建组件&#xff0c;创建下每小时订单笔数组件。 选择饼图&#xff0c;拖拽cnt&#xff08;总数&#xff09;到角度&#xff0c;拖拽hourstr到颜色&#xff0c;调节内径。 修改现在的文字 拖拽组件到仪表盘。 效果如下&#xff1a;...

What is `@RequestBody ` does?

RequestBody 是SpringMVC框架中的注解&#xff0c;通常与POST、PUT等方法配合使用。当客户端发送包含JSON或XML格式数据的请求时&#xff0c;可以通过该注解将请求体内容绑定到Controller方法参数上 作用 自动反序列化&#xff1a; SpringMVC会根据RequestBody注解的参数类型&…...

直流GIL绝缘子表面电荷积聚的电热耦合机理与电场畸变特性研究

中国电机工程学报文献复现 关于comsol GIL仿真模型&#xff1a;基于电热多物理场耦合模型的直流GIL 绝缘子表面电荷积聚及其对沿面电场影响的研究上周啃完那篇中国电机工程学报的直流GIL绝缘子仿真论文&#xff0c;本来以为照着公式套就能搞定&#xff0c;结果在Comsol里卡了整…...

智能变电站实战:如何用SCL配置文件搞定IED设备联调(附避坑案例)

智能变电站实战&#xff1a;SCL配置文件在IED设备联调中的关键作用与避坑指南 在智能变电站的工程实施中&#xff0c;设备联调环节往往成为项目进度的"拦路虎"。据统计&#xff0c;超过60%的现场调试时间消耗在IED设备间的通信配置问题上。SCL&#xff08;Substation…...

5大维度重构Windows体验:开源系统优化方案全解析

5大维度重构Windows体验&#xff1a;开源系统优化方案全解析 【免费下载链接】Atlas &#x1f680; An open and lightweight modification to Windows, designed to optimize performance, privacy and security. 项目地址: https://gitcode.com/GitHub_Trending/atlas1/Atl…...

AutoUnipus:重新定义U校园学习效率的智能解决方案

AutoUnipus&#xff1a;重新定义U校园学习效率的智能解决方案 【免费下载链接】AutoUnipus U校园脚本,支持全自动答题,百分百正确 2024最新版 项目地址: https://gitcode.com/gh_mirrors/au/AutoUnipus 还在为U校园平台上堆积如山的网课任务而焦虑吗&#xff1f;每天花费…...

别再手动敲代码了!用Tesseract-OCR在Linux上批量处理图片转文字(附Python脚本)

从图片到结构化数据&#xff1a;基于Tesseract-OCR的Linux批量文本提取实战 在数字化办公和自动化流程中&#xff0c;我们经常需要处理大量图片中的文字信息——可能是扫描的合同文档、会议白板照片或是PDF中的非可编辑页面。传统的手动录入不仅效率低下&#xff0c;还容易出错…...

Java后端开发——真实面试汇总(持续更新)

一.浙江大学研究院一面&#xff08;面试Time&#xff1a;1小时30分钟&#xff09;1. 面试官自我介绍&#xff0c;同时我开始自我介绍2. 平时接触到哪些数据结构&#xff1f;3. ArrayList和LinkedList的主要区别是什么&#xff1f;4. 数组和链表的主要区别是什么&#xff1f;5.…...

pyqt使用QChartView绘制饼状图详解(QPieSeries)

pyqt使用QChartView绘制柱状图一、工程搭建二、QPieSeries详解1、核心概念2、主要功能和方法2.1、QPieSeries 的常用方法2.2、QPieSlice 的常用属性和方法3、关键点解释4、常见问题二、代码示例1、示例代码2、效果展示一、工程搭建 pyqt6QtCharts模块需要单独安装&#xff0c;…...

# 发散创新:用 Rust实现一个轻量级游戏日引擎的核心调度机制 在现代游戏开发中,**高效的任务调度与资源管理**是性能

发散创新&#xff1a;用 Rust 实现一个轻量级游戏日引擎的核心调度机制 在现代游戏开发中&#xff0c;高效的任务调度与资源管理是性能瓶颈的关键所在。尤其是在“游戏日”这类强调多线程并行处理、实时响应的场景下&#xff0c;传统基于 C 或 Python 的方案往往因内存安全问题…...

破解企业AI应用开发困境:Dify工作流架构的颠覆性价值

破解企业AI应用开发困境&#xff1a;Dify工作流架构的颠覆性价值 【免费下载链接】Awesome-Dify-Workflow 分享一些好用的 Dify DSL 工作流程&#xff0c;自用、学习两相宜。 Sharing some Dify workflows. 项目地址: https://gitcode.com/GitHub_Trending/aw/Awesome-Dify-W…...

OpenClaw技能商店:基于nanobot开发并分享自定义模块

OpenClaw技能商店&#xff1a;基于nanobot开发并分享自定义模块 1. 为什么要开发OpenClaw技能 去年夏天&#xff0c;我发现自己每天要花大量时间处理重复性的文件整理工作——下载各种技术文档&#xff0c;按日期和项目分类存储&#xff0c;再手动生成目录索引。当我第三次在…...