【Electron】上下键切换消息

需求:
![在这里插入图片描述](https://img-blog.csdnimg.cn/bd832900cae64f8d8bd3e85e4c474ec5.png
如图,需要监听上下键切换消息

  1. Electron 注册 全局快捷键【globalShortcut】监听 在focus注册 在blur 注销
    在这里插入图片描述
    如苹果系统在使用某个软件(focus)时 右上角会有应用标题
    Electron 代码:
win.on('focus', ()=>{globalShortcut.register('Up', () => {win.webContents.send('keyDown', { keyType: 'up'}) // 发送给前端页面})globalShortcut.register('Down', () => {win.webContents.send('keyDown', { keyType: 'down'})})
})
win.on('blur',()=>{globalShortcut.unregister('Up')globalShortcut.unregister('Down')
})

前端监听Electron IPC render发送的消息

this.$ipc.removeAllListeners('keyDown');
this.$ipc.on('keyDown', (event, result) => {this.keyCodeUpDown(result)
})

其中 keyCodeUpDown 方法的代码如下:

    keyCodeUpDown(result) {let index = 0;let currentIndex = this.conversationIdListMap[this.currentConversationId];// 都没有选if (!this.currentConversationId) {if (result.keyType == 'up') {index = this.conversationList.length - 1; // 最后一个}if (result.keyType == 'down') {index = 0; // 第一个}} else {if (result.keyType == 'up') {if (currentIndex == 0) {return;}index = currentIndex - 1}if (result.keyType == 'down') {if (currentIndex == (this.conversationList.length - 1)) {return;}index = currentIndex + 1}}// 如果没漏出来 自动滑过去let [currentDiv] = this.$refs['conversation-item-' + this.conversationList[index].conv_id]let bottom_diff = currentDiv.getBoundingClientRect().bottom - window.innerHeight // 元素底部到屏幕的距离let top_diff = currentDiv.getBoundingClientRect().top - 72 // 元素顶部距离if (bottom_diff > 0 && result.keyType == 'down') {this.$refs['conversation-list'].scrollTo(0, currentDiv.offsetTop - window.innerHeight + 75)}if (top_diff < 0 && result.keyType == 'up') {this.$refs['conversation-list'].scrollTo(0, currentDiv.offsetTop - 75)}this.toMessageDetail(this.conversationList[index])},

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

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

相关文章

物联网边缘计算是什么?如何实现物联网边缘计算?

物联网边缘计算是一种在物联网设备和网络中实施计算和数据处理的技术。它允许在物联网设备或网络边缘进行数据分析和处理&#xff0c;而不需要将所有数据传输到远程数据中心或云端进行处理。物联网边缘计算将计算和数据处理的能力迁移到物联网设备的边缘&#xff0c;使得设备能…

如何群发发票邮件内容

群发发票邮件内容需要仔细考虑邮件的主题、正文和附件内容&#xff0c;以确保邮件的准确性和完整性。以 一、明确邮件目的 在群发发票邮件时&#xff0c;首先需要明确邮件的目的。一般来说&#xff0c;发票邮件的目的是向客户或供应商提供交易的详细记录和证明。因此&#xf…

啊哒-MISC-bugku-解题步骤

——CTF解题专栏—— 题目信息&#xff1a; 题目&#xff1a;啊哒 作者&#xff1a;第七届山东省大学生网络安全技能大赛 提示&#xff1a;无 解题附件&#xff1a; 解题思路&#xff1a; 图片的话还是老三样斧winwalk、010Editor、Stegsolve。ok直接开搞&#xff01; 解题…

基于UDP的TFTP文件传输

代码&#xff1a; #include <myhead.h>//实现下载功能 int download(int cfd,struct sockaddr_in sin) {char buf[516] ""; //定义资源包char fileName[128] ""; //定义文件名printf("请输入文件名:");scanf("%s",fileName…

Re0: 从零实现一个置顶任意窗口的小工具

前言 话不多说&#xff0c;先上效果&#xff1a; 这里展示的是通过下拉框选择窗口&#xff0c;让窗口显示并置顶&#xff0c;其实还可以直接通过快捷键&#xff08;先鼠标点击要置顶的窗口&#xff0c;再使用CTRLSHIFTT&#xff09;&#xff0c;本文涉及到的完整代码已上传到G…

【JavaEE初阶】 HTTP 请求 (Request)详解

文章目录 &#x1f340;序言&#x1f384;认识URL&#x1f6a9;URL 基本格式&#x1f6a9;query string&#x1f6a9;关于 URL encode &#x1f334;认识 "方法" (method)&#x1f6a9;GET方法&#x1f6a9;POST 方法&#x1f6a9; GET 和 POST 的区别 &#x1f38b;…

Java后端开发——JDBC(万字详解)

Java后端开发——JDBC&#xff08;万字详解&#xff09; 今日目标 掌握JDBC的的CRUD理解JDBC中各个对象的作用掌握Druid的使用 1&#xff0c;JDBC概述 在开发中我们使用的是java语言&#xff0c;那么势必要通过java语言操作数据库中的数据。这就是接下来要学习的JDBC。 1.1 …

【Axure高保真原型】区间评分条

今天和大家分享区间评分条的原型模板&#xff0c;我们可以左右拖动移动滑块到指定位置&#xff0c;评分条上方会根据两个滑块所在的位置&#xff0c;自动计算出对应的区间范围&#xff1b;这个原型模板使用也很简单&#xff0c;只需要在里面填写区间的最大值&#xff0c;即可自…

纯前端实现导入excel数据

准备工作 - 下载 xlsx npm install xlsx下面直接上代码&#x1f447; <template><div><input type"file" accept".xlsx, .xls" change"handleClick"></div> </template><script langts setup> import * a…

24.有哪些生命周期回调方法?有哪几种实现方式?

有哪些生命周期回调方法?有哪几种实现方式? 有两个重要的bean 生命周期方法, 第一个是init , 它是在容器加载bean的时候被调用。第二个方法是 destroy 它是在容器卸载类的时候被调用。bean 标签有两个重要的属性(init-method和destroy-method)。用它们你可以自己定制初始…

盛最多水的容器-中等

leetcode链接 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xff1a;你不能倾…

JS之Object.defineProperty方法

给对象添加属性的方法有许多&#xff0c;这次让我为大家介绍一种给对象添加属性的静态方法吧&#xff01; 语法&#xff1a;Objcet.defineProperty(对象的名称&#xff0c;“添加的键名”&#xff0c;{value&#xff1a;键值}) const obj {name:"张三",age:18}// 我…

Typora .MD笔记中本地图片批量上传到csdn (.PNG格式)(无需其他任何图床软件)

Typora .MD笔记中本地图片批量上传到csdn &#xff08;.PNG格式&#xff09;(无需其他任何图床软件) 截图软件推荐 qq 截图 快捷键 ctrlshiftA. 步骤一 设置Typora 的图片 点击文件. 点击偏好设置 ->图像 我们可以选择将图片复制到我们的文件夹中。 建议刚写好文件标题就…

C#键盘钩子(Hook)拦截器的使用

引言 键盘钩子(Hook)是一种机制&#xff0c;允许程序捕获和处理操作系统中的键盘输入。在C#中&#xff0c;我们可以使用键盘钩子来创建一个拦截器&#xff0c;用于拦截特定的键盘事件并执行自定义操作。本文将介绍如何使用C#开发一个键盘钩子拦截器&#xff0c;并给出一些示例代…

算法中的时间复杂度,空间复杂度

一、前言 算法&#xff08;Algorithm&#xff09;是指用来操作数据、解决程序问题的一组方法。对于同一个问题&#xff0c;使用不同的算法&#xff0c;也许最终得到的结果是一样的&#xff0c;但在过程中消耗的资源和时间却会有很大的区别 衡量不同算法之间的优劣主要是通过时…

离线环境下使用百度地图(展示自己的地图瓦片)3.0版本api

案例: 设置覆盖物标注提示文字: <script>// 百度地图API功能var map new BMap.Map("map",{ mapType: BMAP_HYBRID_MAP }); var point new BMap.Point(120.55294, 41.665515); // 创建Map实例map.centerAndZoom(point, 18); // 初始化地图,设置中心点坐标…

Java-多线程基本知识学习总结

多线程 前言一、线程的创建1、继承Thread类2、实现Runnable接口 二、线程的生命周期三、操作线程的方法1、线程的休眠2、线程的加入3、线程的礼让4、线程的优先级 四、线程同步End 前言 Java是支持多线程的编程语言&#xff0c;所谓多线程就是程序能够同时完成多种操作。 计算…

Windows挂载NFS

ubuntu开启nfs 安装 sudo apt install nfs-kernel-server编辑 /etc/exports /data/share *(rw,no_root_squash)重启服务 sudo systemctl restart nfs-server.service验证 showmount -e localhostwindows连接NFS 选择控制面板 > 程序 > 启用或关闭 Windows 功能 添加…

C++,请问为什么力扣题704中,取数组的长度,使用sizeof()/4在运行时候没有报错,但是提交之后报数组越界的错误呢?使用size又可以了

C,请问为什么力扣题704中&#xff0c;取数组的长度&#xff0c;使用sizeof()/4在运行时候没有报错&#xff0c;但是提交之后报数组越界的错误呢&#xff1f;使用size又可以了 在C中&#xff0c; sizeof() 运算符用于获取一个对象或类型的字节大小。在使用 sizeof() 时&#xf…

【Go】EasyJson使用

EasyJson是Go语言中对象序列化与反序列化的工具&#xff0c;类似Java中的fastjson和Jackson&#xff0c;能快速对对象进行序列化和反序列化&#xff0c;本次介绍一下使用方法。 版本信息&#xff1a; go1.20.2 1&#xff0c;获取源码 # go get go get -u github.com/mailru…