渲染组件代码:
<template><div class="window-btn"><i class="minimize" @click="minimize"><img src="../assets/img/最小化.svg" alt="最小化" /></i><i v-if="!isMaximized" class="maxiWindow" @click="maximize"><img src="../assets/img/最大化.svg" alt="最大化" /></i><i v-if="isMaximized" class="resize" @click="restore"><img src="../assets/img/最大化.svg" alt="还原" /></i><i class="close" @click="close"><img src="../assets/img/关闭.svg" alt="关闭" /></i></div>
</template>
<script setup>
import { ref } from "vue";
const isMaximized = ref(false);
/* eslint-disable no-undef */
// 关闭窗口
const close = () => {electron.ipcRenderer.invoke("close");
};
// 最小化窗口
const minimize = () => {electron.ipcRenderer.invoke("minimize");
};
// 最大化窗口
const maximize = () => {electron.ipcRenderer.invoke("maximize");isMaximized.value = true;
};
// 还原窗口
const restore = () => {electron.ipcRenderer.invoke("restore");isMaximized.value = false;
};
</script>
<style scoped>
.window-btn {min-width: 110px;i {cursor: pointer;img {width: 30px;height: 30px;&:hover {background-color: hsla(0, 100%, 50%, 0.489);}}}
}
</style>
主进程代码:
// 关闭窗口
const { dialog } = require('electron')
ipcMain.handle('close', () => {// 弹出确认框dialog.showMessageBox(null, {type: 'question',buttons: ['取消', '确定'],title: '确认关闭窗口',message: '确定要关闭窗口吗?'}).then((result) => {if (result.response === 1) {// 用户点击了“确定”,关闭当前窗口BrowserWindow.getFocusedWindow().close()// 软件退出// app.quit()}})
})// 最小化窗口
ipcMain.handle('minimize', () => {BrowserWindow.getFocusedWindow().minimize()
})
// 最大化窗口
ipcMain.handle('maximize', () => {BrowserWindow.getFocusedWindow().maximize()
})
// 还原窗口
ipcMain.handle('restore', () => {BrowserWindow.getFocusedWindow().restore()
})