解决electron中自定义标题时，设置可拖动属性时，点击事件不触发的问题

最新推荐文章于 2024-05-31 11:37:31 发布
最新推荐文章于 2024-05-31 11:37:31 发布
阅读量86 收藏
点赞数 3
文章标签： electron
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59599812/article/details/138801136
版权

在需要点击的元素css样式添加   -webkit-app-region: no-drag   即可

@万里挑一
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Electron中简单实现拖拽功能
weixin_40494579的博客
11-06 4202
背景 实现简单的拖拽文件、图片到系统本地，拖拽消息体文本发送（类似于微信、QQ中的功能） 实现拖拽到本地系统，不考虑mouse实现方式，使用Electron中的startdrag配合Browser的Drag and Drop startdrag Electron API (startDrag) 提供拖拽文件到桌面系统本地的能力 使用情况比较简单，主进程监听事件，调用startdrag // main-process ipcMain.on('drag-start', (event) => { e
electron-react-custom-titlebar:使用React的Electron的自定义标题栏
05-19
使用React的Electron的自定义标题栏 建立在我的电子React开始模板之上 请用纱 如何使用： 克隆或下载仓库 “纱线安装” “ yarn electronic-dev”运行开发服务器 'yarn electronic-pack [os flag]'为您的操作系统构建电子软件包 额外说明： 在构建之前，请确保在package.json中设置您的信息 检查电子制造商的官方文档以获取更多选项和构建信息 我想用CSS Grid重做此目标并清理一些东西。 也完全移到npm。 我已经在许多其他项目和测试中做到了这一点； 只需为此模板执行此操作。 （2020年2月24日）
custom-electron-titlebar：VS Code标题栏上的自定义电子标题栏显示
02-03
自定义电子标题栏 该项目是电子的打字稿库，可让您配置完全可自定义的标题栏。 它是电子库，不能在基本网站上使用。 安装 npm i custom-electron-titlebar 或使用示例文件夹通过此标题栏初始化基本电子项目。 用法 步骤1 在渲染器文件或HTML脚本标签中添加： const customTitlebar = require ( 'custom-electron-titlebar' ) ; new customTitlebar . Titlebar ( { backgroundColor : customTitlebar . Color . fromHex ( '#444' ) } ) ; 如果您使用打字稿 import { Titlebar , Color } from 'custom-electron-titlebar' new Titlebar ( { backgroundColor : Color . fromHex ( '#ECECEC' ) } ) ; 参数backgroundColor: Color是必需的，这应该是Color类型。 （有关更
electron-react-macostitlebar:电子的可自定义的macOS样式标题栏
05-13
电子ReactmacOS TitleBar 电子的可自定义的macOS样式标题栏 笔记 由于上游限制，该软件包尚未准备好用于发布和生产使用。 当电子更新时将更新。
关于node-bindings无法在Electron中使用的解决办法
10-17
今天小编就为大家分享一篇关于关于node-bindings无法在Electron中使用的解决办法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
解决webview内的iframe中的事件不可用的问题
01-03
最近做Android的Webview开发，使用iframe中嵌入了很多页面，嵌入的页面却不可用，最后发现是 webView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { return super.shouldOverrideUrlLoading(view, url); } 不要覆写 shouldOverrideUrlLoading 这个方法，覆写这个方法会拦截ifame中的事
electron + vue项目中自定义标题栏实现最大化、最小化、关闭功能
九段刀客的博客
02-12 4660
效果 版本信息 "electron": "^11.0.0" "vue": "^3.0.0" 代码 实现逻辑 1、设置属性实现头部隐藏 2、vue中触发事件，使用electron的ipcRenderer方法去发布事件，electron主线程中接收到事件，并调用electron内部的方法实现关闭，最小化等功能。 vue.config.js module.exports = { pluginOptions: { electronBuilder: { nodeIntegratio
electron 无边框后菜单栏无法点击
weixin_42613017的博客
02-15 155
如果你的 Electron 应用程序窗口没有边框，但菜单栏不响应点击，可能是因为没有启用 "无框架窗口"(frameless window)时，菜单栏会被窗口边框遮挡。 为了解决这个问题，你需要确保在创建窗口时使用了正确的选项来禁用窗口边框。下面是一个示例代码片段，展示如何使用 Electron 的 BrowserWindow 模块创建一个没有边框的窗口： const { app, Browser...
Electron无边框自定义窗口拖动
u014708123的博客
04-01 655
最近使用了electron框架，发现如果自定义拖动是比较实用的;特别是定制化比较高的项目，如果单纯的使用-webkit-app-region: drag;会让鼠标事件无法触发;
electron-vue不同窗口切换改变窗口大小，以及setSize失效问题
ajiejie66的博客
09-02 1346
【代码】electron-vue不同窗口切换改变窗口大小，以及setSize失效问题。
4.Electron之自定义菜单(绑定快捷键、点击事件)
一起coding，一起嗨。
04-24 3960
electron版本：v18.1.0 一、主进程引入Menu模块 const { Menu } = require('electron') 二、编写菜单数据并启用 const { Menu } = require('electron') var template = [ { label: '菜单A',//一级菜单名称 submenu: [ //定义子菜单 { label: '菜单A1' }, { label:
electron打包时资源下载失败cannot resolve xxx/30.0.9/electron-v30.0.9-win32-ia32.zip
关注前端，关注原创
05-31 217
同学们可以私信我加入学习群！最近electron更新频繁，而我在用electron做个人项目，对稳定性没有太高要求，希望保持着electron的最新版本，所以就没有固定版本。单位网络不太好，打包时遇到无法下载资源包的问题： 如图所示： 第一反应，当然是希望修改镜像源，让打包工具可以自行下载资源包。但是如果镜像源设置后，都无法下载，就需要我们手动下载资源包了。截止到2024年5月31日，淘宝镜像源资源地址为：https://registry.npmmirror.com/binary.html打开后，是所有的
nodejs中使用ffmpeg零基础教程（electron+vue3）
关注前端，关注原创
05-28 1036
最近想要把自己写的一些知识点，在写完demo后，除了形成博客记录笔记，还可以便捷地录屏形成视频教程。所以研究了好久如何在nodejs中完成录屏功能。本功能模块基于electron+vue3完成，原生nodejs也可以作为参考，原理是一致的。踩了很多坑，否了很多方案后，终于形成了目前的方案。ffmpeg插件：这是真正的录屏插件，windows系统中以exe可执行文件形式存在，其它所有插件都是围绕它开发。
基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip
05-31
【优质项目推荐】 1、项目代码均经过严格本地测试，运行OK，确保功能稳定后才上传平台。可放心下载并立即投入使用，若遇到任何使用问题，随时欢迎私信反馈与沟通，博主会第一时间回复。 2、项目适用于计算机相关专业（如计科、信息安全、数据科学、人工智能、通信、物联网、自动化、电子信息等）的在校学生、专业教师，或企业员工，小白入门等都适用。 3、该项目不仅具有很高的学习借鉴价值，对于初学者来说，也是入门进阶的绝佳选择；当然也可以直接用于 毕设、课设、期末大作业或项目初期立项演示等。 3、开放创新：如果您有一定基础，且热爱探索钻研，可以在此代码基础上二次开发，进行修改、扩展，创造出属于自己的独特应用。 欢迎下载使用优质资源！欢迎借鉴使用，并欢迎学习交流，共同探索编程的无穷魅力！ 基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip 基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip 基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip
六一儿童节快乐！（六一儿童节庆祝代码）Vue开发
05-31
六一儿童节快乐！（六一儿童节庆祝代码）Vue开发 like Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and fixes files npm run lint Customize configuration
uniapp聊天工具源码.zip
05-31
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
NX二次开发uc1603 函数介绍
05-31
NX二次开发uc1603 函数介绍，Ufun提供了一系列丰富的 API 函数，可以帮助用户实现自动化、定制化和扩展 NX 软件的功能。无论您是从事机械设计、制造、模具设计、逆向工程、CAE 分析等领域的专业人士，还是希望提高工作效率的普通用户，NX 二次开发 Ufun 都可以帮助您实现更高效的工作流程。函数覆盖了 NX 软件的各个方面，包括但不限于建模、装配、制图、编程、仿真等。这些 API 函数可以帮助用户轻松地实现自动化、定制化和扩展 NX 软件的功能。例如，用户可以通过 Ufun 编写脚本，自动化完成重复性的设计任务，提高设计效率；或者开发定制化的功能，满足特定的业务需求。语法简单易懂，易于学习和使用。用户可以快速上手并开发出符合自己需求的 NX 功能。本资源内容 提供了丰富的中英文帮助文档，可以帮助用户快速了解和使用 Ufun 的功能。用户可以通过资源中的提示，学习如何使用 Ufun 的 API 函数，以及如何实现特定的功能。
【目标检测数据集】遥感类军用飞机检测数据集3800张20类别VOC+YOLO格式.zip
最新发布
05-31
【目标检测数据集】遥感类军用飞机检测数据集3800张20类别VOC+YOLO格式.zip 数据集格式：Pascal VOC格式+YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：3821 标注数量(xml文件个数)：3821 标注数量(txt文件个数)：3821 标注类别数：20 标注类别名称:["A1","A2","A3","A4","A5","A6","A7","A8","A9","A10","A11","A12","A13","A14","A15","A16","A17","A18","A19","A20"] 每个类别标注的框数： A1 框数 = 1646 A2 框数 = 1726 A3 框数 = 1164 A4 框数 = 642 A5 框数 = 1262 A6 框数 = 436 A7 框数 = 680 A8 框数 = 944 A9 框数 = 1073 A10 框数 = 924 A11 框数 = 501 A12 框数 = 702 A13 框数 = 1652 A14 框数 = 177
electron 自定义 操作栏 并且可拖拽
05-25
在 Electron 中，可以使用自定义 HTML/CSS/JavaScript 来创建应用程序的操作栏，并使用 Electron 的 API 来使其可拖拽。以下是一个简单的示例： 1. 创建一个 HTML 文件，用于定义操作栏的外观和布局。 ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Custom Toolbar</title> <style> /* 操作栏样式 */ .toolbar { background-color: #333; color: white; height: 30px; padding: 5px; -webkit-app-region: drag; } /* 操作栏中按钮的样式 */ .toolbar button { background-color: transparent; border: none; color: white; cursor: pointer; font-size: 16px; margin-right: 10px; outline: none; } </style> </head> <body> <div class="toolbar"> <button id="close">X</button> <button id="minimize">-</button> <button id="maximize">+</button> </div> </body> </html> ``` 2. 在 Electron 的主进程中创建窗口，并将该 HTML 文件加载到该窗口中。 ``` const { app, BrowserWindow } = require('electron') function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, frame: false, // 隐藏默认操作栏 webPreferences: { nodeIntegration: true } }) win.loadFile('toolbar.html') // 加载操作栏 HTML 文件 // 允许拖拽窗口 win.on('maximize', () => { win.webContents.send('maximized') }) win.on('unmaximize', () => { win.webContents.send('unmaximized') }) } app.whenReady().then(createWindow) ``` 3. 在 HTML 文件中添加 JavaScript 代码，以便在用户点击操作栏按钮时执行相应的窗口操作。 ``` const { ipcRenderer, remote } = require('electron') // 通过 IPC 通信接收窗口最大化/还原事件 ipcRenderer.on('maximized', () => { document.getElementById('maximize').innerHTML = '-' }) ipcRenderer.on('unmaximized', () => { document.getElementById('maximize').innerHTML = '+' }) // 获取当前窗口 const win = remote.getCurrentWindow() // 关闭窗口 document.getElementById('close').addEventListener('click', () => { win.close() }) // 最小化窗口 document.getElementById('minimize').addEventListener('click', () => { win.minimize() }) // 最大化/还原窗口 document.getElementById('maximize').addEventListener('click', () => { if (win.isMaximized()) { win.unmaximize() } else { win.maximize() } }) ``` 4. 使用 CSS 的 `drag` 属性，使操作栏可拖拽。 ``` .toolbar { -webkit-app-region: drag; } ``` 以上是一个简单的示例，您可以根据自己的需求进行扩展。注意，在使用自定义操作栏时，需要禁用 Electron 默认的操作栏（通过设置 `frame: false`）。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值