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

完成