electron关于无边框窗口无法拖拽移动以及点击事件失效的问题

最新推荐文章于 2024-02-17 21:50:21 发布
最新推荐文章于 2024-02-17 21:50:21 发布
阅读量1.8k 收藏 2
点赞数 1
分类专栏： vue 文章标签： electron 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29965101/article/details/127227855
版权

electron 项目 窗口无边框
frame : false
但是无边框窗口会产生无法移动的问题

设置 -webkit-app-region: drag 把整个文档都变成了一个可拖拽的对象：

-webkit-app-region: drag;

现在拖动的问题解决了，但是原来所有的点击事件却失效了，为此我们通过设置部分的这个属性值为 no-drag 来解决：

-webkit-app-region: no-drag

墨守成规如何成功
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Electron-Vue】构建桌面应用（38）- 事件的优先级导致点击事件无效
chenqk_123的专栏
06-30 523
最近在使用Electron-vue做项目的时候发现，给隐藏域中的list添加click事件，无法获取到点击的值，在相应的函数中打印信息，并没有获得输出信息，也就是说可能压根就没有触发click事件。 讲一下我的需求：在客户端登陆成功后，记录用户使用过的地址和端口号，以便用户下次登录时，可以直接从下拉菜单中选择。 由于前面的组件封装了关于表单的校验，以脱离文档流position:absolute的方式给出用户输入信息，而现在需要做的用于展示用户输入过的地址集合也是通过这种方式去展示。 具体的思路是： 当用
Electron无边框自定义窗口拖动的问题小结
最新发布
菜鸟教程
05-08 961
到此这篇关于Electron无边框自定义窗口拖动的文章就介绍到这了,更多相关Electron自定义窗口拖动内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！教程下载地址： 网赚博客https://www.piaodoo.com/创业项目排行榜前十名https://www.piaodoo.com/茂名一技http://www.enechn.com/// 如果窗口已销毁。
Electron程序不能拖拽文件的解决方案
06-01 946
但是，如果以管理员权限运行Electron应用，由于资源管理器权限级别不及管理员级别高，文件拖拽操作将被禁止。今天收到客户提交的一个BUG反馈，报告我们的客户端软件不支持文件拖放操作。鼠标在拖拽文件至软件窗口时显示“禁止”标志，尝试使用其他软件进行文件拖拽都没有此问题。后来无意间注意到软件快捷方式上的小盾牌图标，发现客户是在用管理员权限运行此程序，于是我想到了Windows的UAC机制。确认原因后，我重新安装了软件，修改了默认安装目录，并将运行权限更改为标准用户。重新启动软件后，文件拖拽操作恢复正常。
Electron设置frame:false后关闭失效--【Foam番茄】
在数字时代,软件的名字就是脆弱,代码会随着时间流逝而烂掉
12-21 2572
在编写electron应用程序的时候，设计一个自己喜欢的ui是必不可少的 那么缩小，放大，关闭功能是必备 import { remote } from 'electron' // 缩小 remote.getCurrentWindow().minimize() // 放大 remote.getCurrentWindow().maximize() // 关闭 remote.getCurrentWindow().close() 以上方式是基本的缩小放大关闭功能 然而，electron中使用了frame: fal
记Electron的踩的坑；关于 resizable: false和自定义窗口最大化和恢复时候遇到的问题、关于 设置了frame: false 的无边框窗口的拖动问题；
ddx2019的博客
06-13 8180
一、问题描述 new BrowserWindow的时候，通过 resizable: false 设置了禁止改变主窗口尺寸,通过 frame: false设置为无边框窗口，设置过后，win.isMaximized()总是返回false，win.restore();也无法恢复到原始窗口大小，此时我自定义的最大化恢复功能无法实现； // 窗口 最大化、恢复 ipcMain.on('window-max', function() { if (win.isMaximized()) { w
electron桌面端div写@click事件不生效
sinat_37769127的博客
03-17 612
electron桌面端div写@click事件不生效 给div加上这两行css样式即可 user-select: none; -webkit-app-region：no-drag
electron-restore 事件 无效
yk的博客
08-08 417
electron自定义缩小 扩大 恢复 关闭 扩大后无法恢复问题
Electron无边框窗口（最小化、最大化、关闭、拖动）以及动态改变窗口大小
06-09
为了让用户能够拖动无边框窗口，我们需要监听鼠标按下和移动事件，然后更新窗口位置。在上述代码中，我们已经为上边框添加了拖动功能。如果希望整个窗口可拖动，可以监听窗口的全局`mousedown`和`mousemove`事件。 ...
无边框窗口的resize拖动实现
03-30
在实际开发中，可能还需要处理窗口最小化、最大化等其他功能，以及考虑不同分辨率和 DPI 设置下的显示问题。不过，上述内容已经足够让你理解无边框窗口resize拖动的基本实现。通过不断学习和实践，你可以进一步完善...
无边框窗口加阴影
04-07
"无边框窗口加阴影"的主题主要涉及到Windows API的使用，以及图形设备接口（GDI）或更现代的Direct2D技术来实现阴影效果。下面我们将深入探讨这个主题。 首先，无边框窗口通常是通过将窗口样式中的WS_BORDER标志...
基于electron多窗口模式的模板
02-19
本文将深入探讨Electron、JavaScript、多窗口概念以及如何利用它们构建模板。 Electron是由GitHub开发的一个开源框架，它允许使用Web技术（如HTML、CSS和JavaScript）来构建桌面应用。Electron通过将Chromium浏览器...
electron实现类似QQ窗口靠边自动边缘隐藏
07-20
可以访问这篇文章有完整介绍： ... 最近做了一个electron+vue的项目，需要实现类似QQ边缘自动隐藏的功能。...后来发现通过监听鼠标在窗口的位置可以非常方便实现鼠标hover和out的判断，从而实现窗口自动隐现功能。
Electron 设置 -webkit-app-region 后无法响应鼠标点击事件的解决方式
热门推荐
Tycho‘s Blog
02-19 1万+
一、问题 在开发 Electron 应用的过程中，想要使得窗口在普通大小可以拖动，于是设置给 title-bar css 如下： .title-bar { -webkit-app-region: drag; } 但是设置了这个属性后，发现在 title-bar 上双击全屏和 restore size 的功能又废了，现象如图：   怎么办呢？ 二、网上现有的方案 通过搜索不难发...
electron标题栏设置-webkit-app-region: drag；后无法双击放大缩小窗体
weixin_43276017的博客
04-24 2262
记录一下，防止自己以后再次踩坑，也防止后人踩坑 需求 标题栏可进行窗体的拖拽，并且可以双击放大缩小窗体 于是乎： 设置了-webkit-app-region: drag; 结果 拖拽是能拖拽了，但是双击等事件无法触发 坑 BrowserWindow中设置了resizable: false; （不允许调节大小），设置为flase将会使得窗体无法调节大小，当然也会是的可拖拽区域双击无法放大缩小窗体 win = new BrowserWindow({ width: 1440, height: 81
Electron 应用开发实践指南 实战篇：自定义窗口的拖拽和缩放
sybh的博客
02-17 2573
默认情况，在构建的时候，会使用系统自带的原生窗口样式，比如在MacOS下的样式：在有些情况下，操作系统的原生窗口并不能符合我们的一些视觉和交互需求。所以，在使用electron创建桌面应用的时候，有时候我们希望能完全掌控窗口的样式，而隐藏掉系统提供的窗口边框和标题栏等。这个时候就需要用到自定义窗口。既然无法做到全屏拖拽移动窗口，那么有没有更好的办法呢？其实另一种方案就是自定拖拽移动，具体怎么做呢？Electron 需要拖拽的窗口的内容区域监听mousedown事件，如果是鼠标左键按下，则开启可拖拽开关。
electron无边框模式完美解决同时实现拖动和双击最大化
li19931130的博客
06-06 7742
无边框模式下，需要在background.ts启动启用：frame:false，transparent:true；配置后, 自定义导航栏这时候窗口是不可以拖动的。但是您想拖动的话，这时候您要元素中声明一个：-webkit-app-region: drag;(元素可拖动模式),但是设置以后出现了新问题drag模式下元素无法监听到鼠标双击或者单击事件。解决此问题之前看了很多文章的方法1.父元素下嵌套等宽等高的div设置-webkit-app-region: no-drag;见Electron设置-webkit-
react基础Day01-React概述&脚手架搭建&JSX&组件
码化疼
11-28 433
React基础知识点 目标 能够说出React是什么 能够说出React的特点 能够掌握React的基本使用 能够使用React脚手架 什么是React （★★★） React是一个用于构建用户界面的javaScript库，起源于facebook的内部项目，后续在13年开源了出来 特点 声明式 你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI 基于组件 组件...
electron 无边框窗口拖拽移动问题记录及解决办法
无名牛宝宝
06-18 2400
electron 无边框窗口拖拽移动问题记录及解决办法
electron vue 无边框窗口
07-28
你可以使用 Electron 和 Vue 来创建一个无边框窗口。下面是一些基本步骤： 1. 首先，确保你已经安装了 Electron 和 Vue。你可以使用 npm 或者 yarn 进行安装。 2. 创建一个新的 Vue 项目。你可以使用 Vue CLI 来快速搭建一个基本的 Vue 项目。 3. 在你的 Vue 项目中，创建一个新的 Electron 主进程文件，比如 `main.js`。 4. 在 `main.js` 中，使用 Electron 的 `BrowserWindow` 类来创建一个无边框窗口。你可以通过设置 `frame` 为 `false` 来实现无边框。同时，你可以设置窗口的宽度、高度、位置等属性。 5. 将你的 Vue 应用挂载到 Electron 窗口中。你可以使用 `loadURL` 方法加载你的 Vue 应用的入口文件。 6. 运行你的 Electron 应用，即可看到无边框窗口中显示了你的 Vue 应用。 这只是一个简单的示例，你可以根据自己的需求进行更多的定制和调整。希望对你有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值