Electron+vue制作桌面应用--自定义标题栏最大化-最小化和关闭

上一篇：electron+vue制作桌面应用——自定义标题栏我们介绍了如何使用electron制作自定义样式的标题栏接下来介绍一下如何实现标题栏上的最大化、最小化和关闭按钮首先，查看electron文档的BrowserWindow部分，我们发现electron准备了三个方法：win.close()、win.maximize()和win.minimize()供我们调用。那么问题来了，我的渲染进程获取到了点击事件，如何在主进程中调用相应的方法呢？这里有两种方法，一种是使用ipc，一种是使用romate这里先介绍一下ipc新组件Titlebtn，'src\renderer\components\mytitle\Titlebtn.vue'这里需要注意一下，因为之前我们设置了标题栏样式-webkit-app-region:drag，这里的按钮必须设置style-webkit-app-region：不可拖拽，否则按钮不会被选中或者点击按钮后，通过ipcRenderer向主进程发送消息，然后修改我们的Titlebtn组件，如下修改主进程index.js，监听渲染进程的消息，根据消息执行相应的动作import{ipcMain}from'electron'ipcMain.on('min',e=>mainWindow.minimize());ipcMain.on('max',e=>{if(mainWindow.isMaximized()){mainWindow.unmaximize()}else{mainWindow.maximize()}});ipcMain.on('close',e=>mainWindow。关闭（））;