Electron实现动态化窗口高度

最近有个需求，就是希望窗口只有导航条那么高的高度，悬浮在屏幕上,但是这里加载的是个三级菜单，超出高度会被隐藏，因此记录下解决过程最近有个需求，就是希望窗口只有导航条那么高的高度，悬浮在屏幕上,但是这里加载的是个三级菜单，超出高度会被隐藏，因此记录下解决过程

如图实现 Electron窗口在上面固定,高度只有100px

electron2.png

这里是个三级菜单,鼠标移入时显示对应的二级或三级菜单,如果高度写死固定,菜单视图高度不够肯定会被隐藏,这里说下自己的解决办法

动态化改变窗口高度

我们可以首先设置窗口初始化高度100,然后在鼠标移入时候去改变窗口高度。于是我们发现 BrowserWindow 的确有 ** win.setSize() ** 重新设置窗口的宽高值 这个api。

 mainWindow = new BrowserWindow({
        resizable: false,
        x: 0,
        y: 0,
        width: arg.width,
        minWidth: 750,
        transparent: true,
        height: 100,
        title: "风控",
        frame: false,
        movable: true,
        show: false
    });

//接收通知 改变窗口高度
const ipc = require('electron').ipcMain;
ipc.on("setMainWindow", function (e, data) {
    mainWindow.setSize(data.width, 600);
})
    

需要说明的一点,窗口高度改变后，会出现下面一大块的白板，很不美观，因此我们可以把他设置成透明色。设置 transparent：true, frame:false

我们现在需要一个触发改变窗口的事情，因此我们去注册下。这里我们使用的antd的Menu 菜单 ant-design

  <Menu
    onMouseEnter={() => this.setMainWindowHeight()}
    mode="horizontal"
    style={{ background: '#2E3748', color: "#fff" }}
    theme='dark'
   >
  {this.createMenu(this.state.rightMenus)}
  </Menu>
  setMainWindowHeight() {
       //触发设置主窗口大小
       ipcRenderer.send('setMainWindow', { "width": window.screen.width, "height": window.screen.height })
   }

当鼠标移入Menu菜单时,我们给窗口通信改变窗口高度,我们来看看效果.

electron1.png

看起来很完美很nice,现在我们要做的就是鼠标移出后再恢复窗口高度即可。

//接收恢复窗口高度事情
ipc.on("setMainWindow0", function (e, data) {
    mainWindow.setSize(data.width, 100);
})

现在前端需要做的就是取触发鼠标移出发送改版窗口高度的方法即可。

  <Menu
    onMouseLeave={() => this.setMainWindowHeight0()}
    onMouseEnter={() => this.setMainWindowHeight()}
    mode="horizontal"
    style={{ background: '#2E3748', color: "#fff" }}
    theme='dark'
   >
  {this.createMenu(this.state.rightMenus)}
  </Menu>
 setMainWindowHeight0() {
      //恢复原来窗口
      ipcRenderer.send('setMainWindow0', { "width": window.screen.width, "height": window.screen.height })
  }

尼玛，发现根本不是那么回事,onMouseEnter 只对横着的菜单Menu有效，对悬浮的彩蛋根本没用。我们打开调试发现 其他菜单是用定位写上去的,设置 display：none 当鼠标移入显示，因为我们要操作的就是整个竖条的div整体，监听它的 onMouseLeave 事件

electron3.png electron4.png

查看Menu菜单文档,我们发现 Menu.Item props 有 onMouseLeave

onMouseLeave Function({eventKey, domEvent})

因此我们给 Menu.Item 添加 onMouseLeave事件

 <Menu.Item
    onMouseLeave={({ domEvent }) => this.getMenuMouseover(domEvent)}
     key={ele.id}
   }
 </Menu.Item>
 
 //查看dom层级关系发现 我们要监听的整个dom是 Menu.Item 祖级
 getMenuMouseover(e) {
    const menu = e.target.parentNode.parentNode;
     menu.addEventListener("mouseleave", this.setMainWindowHeight0)
 }

这样似乎满足了我们的要求，但是频繁的操作dom对性能也不是很友好，后续思考如何优化这一块。。。