第十四章：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

完成