当前位置: 首页 - 编程技术 - 文章正文

记Electron的踩的坑;关于 resizable: false和自定义窗口最大化和恢复时候遇到的问题、关于 设置了frame: false 的无边框窗口的拖动问题;

xiaoqihv
前言

前言: 主窗口未设置resizable:false;,若要自定义electron的窗口最大化等功能,请参考electron自定义 窗口最大化最小 化关闭功能,

一、主窗口未设置resizable:false; 正常的自定义最大化恢复功能,正常实现:

1. 主窗口基本设置如下:

win = new BrowserWindow({ width: 1122, height: 670, show: false, // 一开始是false,loadpage加载完毕的时候为true frame: false, // 关闭window自带的关闭等功能以及工具栏, 无边框窗口是不允许拖动的,可通过设置样式让其可拖动 webPreferences: { nodeIntegration: true, webSecurity: false //允许跨域 } })

2. 渲染进程(vue文件中):

<template> <div class="header"> <span class="el-icon-full-screen" @click="maximizeWin"></span> </div></template><script>import { ipcRenderer} from 'electron';export default { methods: { maximizeWin(){ ipcRenderer.send('window-max') // 通知主进程,我要进行窗口最大化、恢复操作 } }}</script>

3. 主进程:(background.js中)

// 窗口 最大化、恢复ipcMain.on('window-max', function() {// 主进程接收渲染进程的窗口最大化通知; if (win.isMaximized()) { // true表示窗口已最大化. win.restore();// 将窗口恢复为之前的状态 } else { win.maximize();// 窗口最大化 }}) 二、主窗口设置 resizable: false后,自定义的窗口最大化恢复功能用上述方法无法实现

electron在new BrowserWindow({...}) 时,通过resizable: false 设置了禁止改变主窗口尺寸后,win.isMaximized() 总是返回false, win.restore()方法也失效,自定义的窗口最大化恢复功能无法实现。

解决办法: 在渲染进程中定义一个变量 flag,通过 flag 确定 进行最大化窗口操作还是恢复操作;并将其传给主进程。主进程 利用 渲染进程传过来的 flag,替代 win.isMaximized() 这个判断条件。主进程 利用 win.setContentSize(x,y) 和 win.center() 的结合,完成原先win.restore();做的事情;这里 用win.setContentSize(x,y)的原因是,win.setSize(x,y)不起作用;

1. 主窗口基本设置如下:

win = new BrowserWindow({ width: 1122, height: 670, resizable: false, //禁止改变主窗口尺寸,设置过后,win.isMaximized()总是返回false show: false, // 一开始是false,loadpage加载完毕的时候为true frame: false, // 关闭window自带的关闭等功能以及工具栏, 无边框窗口是不允许拖动的,可通过设置样式让其可拖动 webPreferences: { nodeIntegration: true, webSecurity: false //允许跨域 } })

2. 渲染进程(vue文件中):

<template> <div class="header"> <span class="el-icon-full-screen" @click="maximizeWin"></span> </div></template><script>import { ipcRenderer} from 'electron';export default { data () { return { winFlag:false // winFlag为true时,代表要进行窗口最大化操作 } }, methods: { maximizeWin(){ ipcRenderer.send('window-max') } maximizeWin(){ this.winFlag=!this.winFlag; ipcRenderer.send('window-max',{winFlag:this.winFlag}) // 通知主进程,我要进行窗口最大化、恢复操作,并传入一个Boolean值 }, }}</script>

3. 主进程:(background.js中)

// 窗口 最大化、恢复ipcMain.on('window-max', function(event, obj) { // 接收渲染进程的消息和数据 if (obj.winFlag) { // val为 true,代表我想进行最大化窗口操作,此时 调用最大化函数 win.maximize(); } else { win.setContentSize(1122, 670); //重新设置窗口客户端的宽高值(例如网页界面),这里win.setSize(x,y)并不生效。 win.center(); // 窗口居中 }}) 三、主窗口设置 frame: false,后,整个窗口不可拖动

electron在new BrowserWindow({...}) 时,通过frame: false (无边框窗口)设置可 关闭window自带的关闭等功能以及工具栏,无边框窗口是不允许拖动的,可通过设置-webkit-app-region: drag;样式让其可拖动,但设置了改样式的元素将不可点击,故有-webkit-app-region: no-drag;样式,让元素可点击

/* 主窗口设置了 resizable: false 禁止改变主窗口尺寸,将不可拖动,故需加drag,让其可拖动; */ .ele_drag { -webkit-app-region: drag; /* 让元素可拖动,设置了drag的元素不可点击 */}.no_drag { -webkit-app-region: no-drag; /* 设置了drag的元素将不可点击,故设置no-drag,让元素可点击 */}

例: 我在我的项目中,对需要拖动的元素用了 ele_drag 类,对这个元素下面的需要点击的元素单独应用了 no_drag 类,详情见Vue+Electron 项目的 header 组件中;

文章地址:https://wenmayi.cn/post/578.html