在TitleBar组件中引入Electron ipcRenderer组件，并且在vue methods中写三个方法：min(最小化)、max(最大化)、close(关闭).
<script>
import {ipcRenderer } from 'electron'
export default {
name:"TitleBar",
props:['title'],
methods:{
min:function(){
ipcRenderer.send('min');
},
max:function(){
ipcRenderer.send('max');
},
close:function(){
ipcRenderer.send('close');
}
}
}
</script>
在TitleBar.vue组件中添加三个按钮，分别绑定最小化、最大化、关闭函数：
<div class="btn-list">
<button v-on:click="min" class="btn btn-min" autofocus="false"></button>
<button v-on:click="max" class="btn btn-max" ></button>
<button v-on:click="close" class="btn btn-close" ></button>
</div>
在main主进程中，使用ipcMain获得render进程提交的消息，并映射到主窗口操作的函数：
ipcMain.on('min', e=> mainWindow.minimize());
ipcMain.on('max', e=> {
if (mainWindow.isMaximized()) {
mainWindow.unmaximize()
} else {
mainWindow.maximize()
}
});
ipcMain.on('close', e=> mainWindow.close());
在TitleBar.vue组件中的CSS中对按钮进行美化：
<style>
.btn-list{
width:100px;
}
.btn{
width:25px;
height:25px;
border:none;
outline:none;
background-image: url("../assets/images/min-max-close-25px.png");
border-radius: 20px;
}
.btn-min{
background-position: -41px 0px;
}
.btn-max{
background-position: -82px 0px;
}
.btn-close{
background-position: 0px 0px;
}
.tiltebar{
display: flex;
padding: 5px;
flex-direction: row;
justify-content: space-between;
background:radial-gradient(
ellipse at top left,
rgba(200, 80, 100, 1) 40%,
rgba(229, 229, 229, .6) 100%
);
}
.tiltebar h2{
-webkit-app-region: drag;
}
</style>
最终效果如下图：
