electron 无边框窗口拖拽移动问题记录及解决办法

在做一款uTools的插件,悬浮文本

image

窗口是没有标题栏的,所以需要找一个地方可以拖动移动位置

就开始了接下来的踩坑记录

项目结构

只是一个简单的容器元素,一个多行文本框

容器元素加一个内边距,然后这个内边距区域就是我理想的可拖动位置

<body>
  <div id="container">
    <textarea id="content" spellcheck="false"></textarea>
  </div>
</body>

实现流程

webkit-app-region

首个版本,我采用CSS很简单便实现了

当时是用 Mac 开发测试的,一切运行良好

#container {
   
   
	-webkit-app-region: drag;
	padding: 10px;
	cursor: move;
}

隔天到 Win 上看效果

发现拖动虽然正常,但是光标样式没有了

image

鼠标放在边框位置不会变成移动的光标

经查阅,设置了-webkit-app-region: drag;的元素,不会在响应鼠标事件了(mac上测试的时候正常的)

so,需要继续改了

鼠标事件

没有简便办法了,就只好自己写个鼠标拖拽事件了

按下记录下鼠标相对于窗口的位置

鼠标移动后计算出窗口新的位置

窗口新

### 实现无边框窗口拖动效果 对于希望在 Electron 和 Vue3 项目中实现无边框窗口并使其可被拖拽的情况,可以通过CSS属性 `-webkit-app-region: drag` 来指定哪些区域支持拖拽操作[^1]。 为了确保整个窗口能够响应用户的拖拽动作,在HTML结构中的最外层容器或是期望作为拖拽区的部分应添加上述样式: ```html <div id="app" style="-webkit-app-region: drag;"> <!-- 应用程序的内容 --> </div> ``` 需要注意的是,任何含有输入控件(如按钮、文本框等)、滚动条或者其他交互元素的地方不应该允许拖拽行为,因为这会干扰这些组件正常的点击或滑动手势。因此,针对这类子元素应当禁用此特性: ```css input, textarea, button { -webkit-app-region: no-drag; } ``` 另外一种方法是在创建Electron窗口之后通过JavaScript来处理鼠标的移动事件从而达到相同的效果。这种方法特别适用于更复杂的场景下自定义窗口的行为逻辑。例如,可以在渲染进程中监听特定频道的消息触发窗口的位置调整函数 `windowMove(windowInstance, channelName)`[^2]。 下面是一个简单的例子展示如何利用Vue组合API模式下的setup钩子完成这一目标: ```javascript import { onMounted } from "vue"; // 假设已经引入了ipcRenderer模块用于进程间通信 import { ipcRenderer } from 'electron'; export default { setup() { const handleMouseMove = () => { // 发送消息给主进程请求改变窗口位置 ipcRenderer.send('win-move-subtitle'); }; onMounted(() => { document.getElementById("draggable-area").addEventListener("mousedown", handleMouseMove); // 清除事件监听器防止内存泄漏 return () => { document.getElementById("draggable-area").removeEventListener("mousedown", handleMouseMove); }; }); return {}; } }; ``` 在此基础上还需要配置好主进程中相应的事件处理器以接收来自渲染端的信息并对窗口执行实际的操作。
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值