在TitleBar組件中引入Electron ipcRenderer組件直秆，并且在vue methods中寫(xiě)三個(gè)方法：min(最小化)、max(最大化)鞭盟、close(關(guān)閉).
<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組件中添加三個(gè)按鈕圾结，分別綁定最小化、最大化齿诉、關(guān)閉函數(shù)：
<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主進(jìn)程中筝野，使用ipcMain獲得render進(jìn)程提交的消息，并映射到主窗口操作的函數(shù)：
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中對(duì)按鈕進(jìn)行美化：
<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>
最終效果如下圖：
