发布于2022-11-19 06:42 阅读(534) 评论(0) 点赞(11) 收藏(2)
无边框模式下,需要在background.ts启动启用:
frame:false,transparent:true;
配置后, 自定义导航栏这时候窗口是不可以拖动的。但是您想拖动的话,这时候您要元素中声明一个:-webkit-app-region: drag;(元素可拖动模式),但是设置以后出现了新问题drag模式下元素无法监听到鼠标双击或者单击事件。
解决此问题之前看了很多文章的方法
1.父元素下嵌套等宽等高的div设置-webkit-app-region: no-drag;
见Electron设置-webkit-app-region后无法响应鼠标点击事件的解决方式 - 百度文库
实测没啥用子元素可以点击可以绑定双击事件但是无法实现窗口拖动
2.在导航窗口上设置-webkit-app-region: no-drag;使窗口可以绑定双击全屏事件. 然后内嵌一个透明的div条-webkit-app-region: drag;使窗口头部可双击,顶部可拖动.
红色为透明div可拖动, 缺点是可拖动区域和可双击区域不同使用起来不方便, 不算完美
3.给元素绑定mouse事件. 监听按下,移动和抬起, 看到了此文章
electron 无边框窗口拖拽,不用 drag 样式和三方库,纯代码实现 - 知乎
说单用鼠标事件容易把窗口甩飞,electron 文档中有screen属性可以获取鼠标的位置的绝对坐标,但是发现此方法写的有多改起来麻烦, 秉承着 "用最少的代码实现最稳定好用的功能" 的原则, 自己便改了个简易版只需要几行代码即可实现
实现思路如下:
自定义标题栏父元素舍弃-webkit-app-region属性, 绑定双击事件实现双击最大化窗口,同时绑定鼠标事件mousedown,mousemove,mouseup.鼠标按下时候发送事件到主进程获取鼠标点击窗口位置和窗口的绝对位置获取鼠标位置到窗口左上角的位置差, 移动窗口时直接用鼠标位置screenX(screenY)减去这个差获取到移动后的窗口绝对位置直接发送给主进程设置即可,实测不漂移稳定耐用,完美解决.
header.vue
- <div
- class="header"
- @dblclick="sizeBtn"
- @mousedown.self="winDown"
- @mousemove.self="winMove"
- @mouseup.self="winUp"
- >
- <!-- xxxxx -->
- </div>
- <script lang="ts">
- const { ipcRenderer } = window.require("electron");
- public canMoving = false;
-
- ...
-
- sizeBtn() {
- let res: boolean = ipcRenderer.sendSync("max", !this.$store.state.isMax);
- this.$store.commit("SET_WIN_MODE", res);
- }
- // 移动窗口----start
- winDown() {
- this.canMoving = true;
- const XY = ipcRenderer.sendSync("win-start");
- this.XY = JSON.parse(XY);
- }
- winMove(e: any) {
- //窗口最大化时禁止移动
- if (this.$store.state.isMax) return;
- if (!this.canMoving) return;
- const params = {
- x: e.screenX - this.XY.x,
- y: e.screenY - this.XY.y,
- };
- ipcRenderer.send("win-move", JSON.stringify(params));
- }
- winUp() {
- this.canMoving = false;
- }
- // 移动窗口----end
-
- ...
-
- </script>
background.ts
-
- // 最大化
- ipcMain.on("max", (e, fullScreen: boolean) => {
- win!.setFullScreen(fullScreen);
- e.returnValue = fullScreen;
- });
-
- // 移动窗口----start
- ipcMain.on("win-start", (e) => {
- const winPosition = win!.getPosition();
- const cursorPosition = screen.getCursorScreenPoint();
- let x = cursorPosition.x - winPosition[0];
- let y = cursorPosition.y - winPosition[1];
- e.returnValue = JSON.stringify({ x, y });
- });
- ipcMain.on("win-move", (_, params) => {
- const param = JSON.parse(params);
- win!.setPosition(param.x, param.y, true);
- });
- // 移动窗口----end
原文链接:https://blog.csdn.net/li19931130/article/details/125145650
作者:大哥你来啦
链接:http://www.qianduanheidong.com/blog/article/455502/166b921510952e1c9cbf/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!