Electron:不使用框架实现自定义的可拖拽标题栏
2022/4/3 23:19:45
本文主要是介绍Electron:不使用框架实现自定义的可拖拽标题栏,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
preload.js:
contextBridge.exposeInMainWorld('window_control', { toClose: () => ipcRenderer.send('close-app'), toMinimize: () => ipcRenderer.send('min-app'), windowMove: (canMove) => ipcRenderer.send("window-move-open", canMove) })
最小化
renderer.js
document.querySelector(".my-btn-minimize").addEventListener('click', () => { window.window_control.toMinimize() })
main.js
ipcMain.on('min-app', () => { if(win){ win.minimize() } })
最大化同理
关闭窗口
renderer.js
document.querySelector(".my-btn-close").addEventListener('click', () => { window.window_control.toClose() })
main.js
ipcMain.on('close-app', () => { if(win) { win.close() } })
拖拽窗口
randerer.js
function titleDown(e) { window.window_control.windowMove(true) } function titleUp(e){ window.window_control.windowMove(false) }
main.js
ipcMain.on("window-move-open", (events, canMoving) => { if (canMoving) { // 读取原位置 const winPosition = win.getPosition(); winStartPosition = { x: winPosition[0], y: winPosition[1] }; mouseStartPosition = screen.getCursorScreenPoint(); // 清除 if (movingInterval) { clearInterval(movingInterval); } // 新开 movingInterval = setInterval(() => { // 实时更新位置 const cursorPosition = screen.getCursorScreenPoint(); const x = winStartPosition.x + cursorPosition.x - mouseStartPosition.x; const y = winStartPosition.y + cursorPosition.y - mouseStartPosition.y; win.setPosition(x, y, true); }, 10); } else { clearInterval(movingInterval); movingInterval = null; } });
setInterval函数的第二个参数,也就是定时器间隔,会直接决定拖拽窗口的流畅感,但是如果设置太低……会出问题!
使标题栏内容不可选择
style.css
.my-title { -webkit-user-select: none; }
这篇关于Electron:不使用框架实现自定义的可拖拽标题栏的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-29Elasticsearch慢查询日志配置
- 2024-05-29揭秘华为如此多成功项目的产品关键——Charter模板
- 2024-05-29海外IDC业务拓展的7大挑战
- 2024-05-29InLine Chat功能优化对标Github Copilot,CodeGeeX带来更高效、更直观的编程体验!
- 2024-05-29CodeGeeX 智能编程助手 6 项功能升级,在Visual Studio插件市场霸榜2周!
- 2024-05-29AutoMQ 生态集成 Apache Doris
- 2024-05-292024年IDC行业的深度挖掘:机遇、挑战与未来展望
- 2024-05-29五款扩展组件齐发 —— Volcano、Keda、Crane-scheduler 等,邀你体验
- 2024-05-29AutoMQ 对象存储数据高效组织的秘密: Compaction
- 2024-05-29活动预告|来 GIAC 大会听大数据降本利器:AutoMQ 基于云原生重新设计的 Kafka