Vue3.0+electron5.0.6手工打造桌面端应用自定义窗口菜单 &amp；isMaximized()始终返回false...(三)

隐藏electron自带的菜单栏使用自定义实现最小化、最大化、关闭、

1.在渲染程序中自定义最小化、最大化、关闭 按钮 事件

在渲染程序中:

 <div class="winMaxMin">

          <span @click="minmizeWin">最小化</span>

          <span @click="maxmizeWin">最大化</span>

          <span @click="closeWin">关闭</span>

  </div>

<script>

import { defineComponent, ref,reactive, onMounted  } from "vue";

let ipcRenderer = require("electron").ipcRenderer;

export default defineComponent({

  setup() {

    const minmizeWin = ()=>{

      ipcRenderer.send("window-min")

    }

    const maxmizeWin = ()=>{

      ipcRenderer.send("window-max")

    }

    const closeWin = ()=>{

      ipcRenderer.send("window-close")

    }

    return {

      minmizeWin,

      maxmizeWin,

      closeWin

    };

  },

2.在主程序(background.js)禁用自带的:隐藏窗口菜单

 win = new BrowserWindow({

    width: 1360,

    height: 800,

    resizable:false,//禁止拖拽改变窗口的大小

    frame: false, //隐藏窗口菜单

    webPreferences: {

      nodeIntegration: true,

    },

3.在主程序添加ipcMain通信

// 1. 窗口 最小化

ipcMain.on('window-min',function(){ // 收到渲染进程的窗口最小化操作的通知，并调用窗口最小化函数，执行该操作

  win.minimize();

})

// 2. 窗口 最大化、恢复

ipcMain.on('window-max',function () {

  console.log(win.isMaximized())

  if(win.isMaximized()){ // 为true表示窗口已最大化

    win.restore();// 将窗口恢复为之前的状态.

  }else{

    win.maximize();

  }

})

// 3. 关闭窗口

ipcMain.on('window-close',function (){

  win.close();

})

打开一看,最小化 、最大化、 关闭功能是好使的,但是在点击最大化时electron窗口是没有任何变化的.

查询很多网上材料都一无所获,

终于试出来了

在

 win = new BrowserWindow({

    width: 1360,

    height: 800,

    resizable:false,//禁止拖拽改变窗口的大小

    frame: false,

    webPreferences: {

      nodeIntegration: true,

    },

    // icon: `${__static}/favicon.ico`

  })

注释掉!!!!!!!!! 注释掉!!!!!!!!!!!!!! 注释掉!!!!!!!!!!!!!!!  重启就OK了