第十四章：Electron-Vue 隐藏顶部菜单 隐藏关闭按钮 自定义关闭 最大化 最小化按钮

electron-vue 中隐藏顶部菜单

//隐藏顶部菜单mainWindow.setMenu(null);

隐藏关闭 最大化 最小化按钮

mainWindow = new BrowserWindow({height: 563,useContentSize: true,width: 1000,frame: false /*去掉顶部导航 去掉关闭按钮 最大化最小化按钮*/})

自定义关闭 最大化 最小化按钮

<template><div id="myHeader"><div class="titlebtn"><div class="min" @click="min"><img src="@/assets/min.png" alt /></div><div class="max"><button @click="max"><img src="@/assets/max.png" alt /></button></div><div class="close"><button @click="close"><img src="@/assets/close.png" alt /></button></div></div></div></template><script>export default {data() {return {};},methods: {min() {this.$electron.ipcRenderer.send("window-min");},max() {this.$electron.ipcRenderer.send("window-max");},close() {this.$electron.ipcRenderer.send("window-close");},},};</script><style lang="scss">#myHeader {width: 100%;height: 50px;line-height: 50px;//可以拖拽-webkit-app-region: drag;}.titlebtn {position: relative;width: 200px;height: 50px;line-height: 50px;float: right;//不可拖拽-webkit-app-region: no-drag;.min {position: absolute;background: "green";right: 100px;width: 20px;img {width: 100%;margin-top: 6px;}}.max {position: absolute;background: "yellow";right: 60px;width: 20px;img {width: 100%;margin-top: 6px;}}.close {position: absolute;background: "black";right: 20px;width: 20px;img {width: 100%;margin-top: 6px;}}}</style>

在App.vue中引用

<template><div id="app"><MyHeader /><router-view></router-view></div></template><script>import MyHeader from "@/components/MyHeader.vue";export default {name: "electronvuewdemo",data() {return {};},components: {MyHeader,},};</script><style lang="scss">* {margin: 0px;padding: 0px;}</style>

主进程接收广播

import {ipcMain, BrowserWindow } from 'electron'//窗口设置const mainWindow = BrowserWindow.getFocusedWindow()ipcMain.on('window-min', function () {mainWindow.minimize();})//登录窗口最大化 ipcMain.on('window-max', function () {if (mainWindow.isMaximized()) {mainWindow.restore();} else {mainWindow.maximize();}})ipcMain.on('window-close', function () {mainWindow.close();})

可拖拽的 css

-webkit-app-region: drag;

不可拖拽的 css

-webkit-app-region: no-drag

完成