当前位置: 首页 > 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注解的参数类型&…...

RK3576/RK3588 Yolo11 目标检测 Demo

前言 以前的大作业&#xff0c;根据rknn_model_zoo和easy eai示例代码修改&#xff08;缝合&#xff09;&#xff0c;仅供参考 后来我试着模块化一些&#xff0c;方便看&#xff0c;但因为核心代码都是直接用的示例代码&#xff0c;所以有些模块还是耦合&#xff08;composit…...

颠覆传统系统管理的轻量级工具:NSudo如何重新定义权限操作

颠覆传统系统管理的轻量级工具&#xff1a;NSudo如何重新定义权限操作 【免费下载链接】NSudo [Deprecated, work in progress alternative: https://github.com/M2Team/NanaRun] Series of System Administration Tools 项目地址: https://gitcode.com/gh_mirrors/ns/NSudo …...

PT-Plugin-Plus:PT站点下载助手安装与使用指南

PT-Plugin-Plus&#xff1a;PT站点下载助手安装与使用指南 【免费下载链接】PT-Plugin-Plus PT 助手 Plus&#xff0c;为 Microsoft Edge、Google Chrome、Firefox 浏览器插件&#xff08;Web Extensions&#xff09;&#xff0c;主要用于辅助下载 PT 站的种子。 项目地址: h…...

手把手教你为i.MX6ULL开发板适配非标准分辨率LCD(以1024x600 OV5640为例)

i.MX6ULL开发板非标准分辨率LCD适配实战&#xff1a;从寄存器配置到图像稳定输出 在嵌入式视觉系统开发中&#xff0c;摄像头与显示设备的适配往往成为项目落地的关键瓶颈。当面对非标准分辨率的LCD屏幕时&#xff0c;开发者需要深入理解图像采集与显示的全链路原理&#xff0c…...

douyin-downloader:智能抖音视频全流程管理工具,让内容收集效率提升90%

douyin-downloader&#xff1a;智能抖音视频全流程管理工具&#xff0c;让内容收集效率提升90% 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader douyin-downloader是一款开源的抖音视频批量下载与管理工具&am…...

手把手教你解决Ubuntu22.04中CH341驱动签名问题(附完整安装流程)

手把手教你解决Ubuntu22.04中CH341驱动签名问题&#xff08;附完整安装流程&#xff09; 当你尝试在Ubuntu22.04上使用CH341串口设备时&#xff0c;可能会遇到一个令人头疼的问题——驱动签名验证失败。这个错误不仅会阻止驱动正常加载&#xff0c;还会让许多Linux新手感到束手…...

Matlab GUI 计时器:基于定时器对象自动更新的数字时钟演示

Matlab图形用户界面计时器&#xff1a;使用定时器对象自动更新的MatlabGUI&#xff0c;一个数字时钟&#xff0c;作为显示基本组件的快速演示&#xff0c;带有一个按钮&#xff0c;用于恢复/暂停执行更新实验室配了新酶标仪孵箱但总有人&#xff08;比如同组摸鱼的小师妹顺便喊…...

OpenClaw自动化测试:百川2-13B量化模型多场景准确率评估

OpenClaw自动化测试&#xff1a;百川2-13B量化模型多场景准确率评估 1. 测试背景与目标 去年冬天&#xff0c;我在为团队寻找一个能处理本地自动化任务的AI助手时&#xff0c;偶然发现了OpenClaw这个开源框架。当时最让我头疼的是&#xff0c;市面上的大模型要么太贵&#xf…...

如何通过离线语音输入提升Android设备的文字录入效率

如何通过离线语音输入提升Android设备的文字录入效率 【免费下载链接】Sayboard An open-source on-device voice IME (keyboard) for Android using the Vosk library. 项目地址: https://gitcode.com/gh_mirrors/sa/Sayboard 在智能手机普及的今天&#xff0c;文字输…...

Phi-4-Reasoning-Vision惊艳案例:模糊图像增强后多步逻辑推理还原

Phi-4-Reasoning-Vision惊艳案例&#xff1a;模糊图像增强后多步逻辑推理还原 1. 项目概述 Phi-4-Reasoning-Vision是基于微软Phi-4-reasoning-vision-15B多模态大模型开发的高性能推理工具&#xff0c;专为双卡4090环境优化。这款工具能够处理复杂的图像推理任务&#xff0c…...