electron-vue 指定区域点击穿透

最新推荐文章于 2024-06-07 11:10:26 发布
最新推荐文章于 2024-06-07 11:10:26 发布
阅读量2.7k 收藏
点赞数
分类专栏： GUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/catgray/article/details/103080703
版权
在 Electron-Vue 应用中，通过设置无边框和背景透明，可以实现指定区域的点击穿透效果。文章展示了如何在 `src/main/index.js` 中配置，并给出了页面示例，说明透明区域的事件会传递到应用后台，如图中箭头所示，当鼠标位于圆形div的透明部分时，VS Code等后台应用能够接收到鼠标事件。
摘要由CSDN通过智能技术生成

首先electron需要设置无边框和背景透明
src/main/index.js :

frame:false,
transparent:true,

页面示例

<template>
  <div >
    <div id="test">
      hello
    </div>
最低0.47元/天 解锁文章
catgray
关注
专栏目录
Electron-Vue # 不规则窗口
skysys的研究小屋
07-05 887
背景描述 很多时候需要的不是标准的矩形窗口，比如音乐播放器的mini模式、安装时候的特效（圈）等等，游戏客户端登陆界面。 实现细节 修改创建窗口的配置： // Create the browser window. win = new BrowserWindow({ height: 380, width: 380, transparent: true, frame: false, resizable: false, maximizable: false,
electron知识汇总
斗师——Ace
02-03 1110
1. electron：跨平台，离线优先的桌面端开发框架。 2. electron是由俩种进程组成，包括主进程和0个或n个渲染进程。 2.1 主进程：承担应用的生命周期（包括启动，退出，准备，正在切换到后台，正在切换到前台等，还负责与原生操作系统API通信）。 2.2 渲染进程：做web页面的ui，渲染进程之间独立在各自的单线程，渲染进程之间相互隔离，不能直接访问操作系统，需要通信到主线程，在通过主线程操作访问操作心态。一个BrowserWindow实例即为一个渲染进程。 3. electron整.
electron 透明窗口+全透明页面，鼠标点击会穿透窗口
u013896513的博客
01-05 1022
electron透明窗口鼠标点击穿透，另：虚拟机不支持electron透明窗口效果。
Node.js-proxy基于electron开发的内网穿透工具
08-10
基于electron开发的内网穿透工具，支持多系统，支持任意本地端口.
electron+vue虚拟桌面开发遇坑之透明窗口鼠标穿透
weixin_42421494的博客
10-29 6891
最近开发一个项目，使用electron做了一个虚拟桌面，按需要显示一部分内容，遮挡在桌面上方，其它地方则需要透明显示，同时能够操作原桌面程序以及操作electron虚拟桌面的内容。 在设置了electron虚拟桌面透明后需要能够点击使用原桌面的程序，按照electron官方文档设置 const { BrowserWindow } = require('electron') let win =...
electron 透明窗口鼠标穿透问题
sevendemage的博客
11-18 645
electron 大透明窗口鼠标穿透，setShape , updateIgnoreMouseEvents
electron透明窗口开启鼠标穿透卡死
最新发布
u013896513的博客
06-07 351
electron透明窗口开启鼠标事件穿透卡死
使用electron-vue + frp 开发一款穿透软件
达拉崩巴斑得贝迪卜多比鲁翁_
11-30 837
点击直达： http://lvsige.top/archives/20
桌面宠物 electron + vue 陪伴女朋友的小宠物
07-15
包含精灵球，数码宝贝，多啦A梦的虚拟桌面宠物。 支持功能如下： 1.支持宠物资源自定义上传。...3.支持鼠标点击宠物。 4.支持宠物事件穿透。 5.支持宠物右键功能菜单，行走，跑动，跳跃，离开，攀爬，打招呼，超能力。
xhznl-todo-list:一个使用electron + vue + electron-builder开发的跨平台todolist（便签）桌面应用
05-09
:sparkles:一个使用 electron + vue + electron-builder 开发的跨平台 todolist（便签）桌面应用 相关技术 ...... 功能预览 步骤 npm install npm run electron:serve npm run electron:build 下载 releases：...
electron 穿透透明区域
qq_35658815的博客
02-01 459
electron 窗口穿透透明区域
vue项目中使用样式穿透
^_^
08-06 275
在平常开发项目中经常会遇到 父子组件嵌套，但是使用子组件时更多是为了复用，使用子组件时即不想修改子组件原来的样式，又想对它进行一些操作 这时候就用到了 样式穿透 1.外层容器 >>> 在less中使用 2.外层容器 /deep/ 在less中使用 3.外层容器 ::v-deep 在scss中使用 如果你发现第一个不能实现 就用其他的试一试 ...
Electron 中创建透明窗口
qq_42062727的博客
12-17 2169
在开发 Electron 应用时，可能需要创建完全透明的窗口，比如我们要做一个屏幕内容共享的功能，在特定矩形区域内的内容才会被共享出来，而这个区域是一个透明且可被穿透的区域。首先我们需要再主进程上创建一个矩形窗口共享区域的窗口一定是透明的、可移动的、并且没有边框、可调整大小，但不能最小化和最大化，也不能进入全屏状态，窗口也不能在程序坞中关闭。
vue蒙版 滚动事件穿透解决方案
默的博客
07-07 516
一句话 @touchmove.stop.prevent 给蒙版加上即可
div 穿透
前端小陈的成长记录
09-12 201
两层div如何点击上层时穿透至下层，触发下层方法
electron的webView通信和如何在Electron中使用webView打开网页并获取DOM元素
qq_44984407的博客
02-23 3809
electron的webView通信
【Electron】-BrowserView模块的有趣玩法
qq_43326668的博客
05-22 1353
除了在Electron应用程序中显示Web内容外，BrowserView模块还可以用于实现一些有趣的玩法和应用场景。在本篇文章中，我们将介绍一些有趣的玩法和不同的用途，以展示BrowserView模块的灵活性和强大性。
electron-vue electron-log
12-15
electron-vue 是一个基于 electron 构建的 vue.js 框架。它结合了 vue.js 和 electron，可以让开发者使用 vue.js 的组件化开发方式来构建跨平台的桌面应用程序。使用 electron-vue 可以快速搭建 electron 应用的基础...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值