electron-vue自定义标题

1.在主进程background.js或者main.js中主窗口配置frame: false

async function createWindow() {
  Menu.setApplicationMenu(null);
  // Create the browser window.
  const win = new BrowserWindow({
    width: 1000,
    height: 600,
    resizable: false,
    frame: false,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
    },
  });

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol("app");
    // Load the index.html when not in development
    win.loadURL("app://./index.html");
  }

  ipcMain.on("window-close", () => {
    win.destroy();
  });
  ipcMain.on("window-min", () => {
    win.minimize();
  });
  ipcMain.on("window-max", () => {
    if (win.isMaximized()) {
      win.unmaximize();
    } else {
      win.maximize();
    }
  });
}

2.此时顶部的标题不见了，现在需要自己自定义放大，缩小，关闭等操作。

上面的标题自己使用css html写。

3.第二步自己写好后，下面说下向主进程发送命令进行放大，缩小，关闭。

 

<script setup>
const { ipcRenderer } = require("electron");

// 关闭窗口
const toClose = () => {
  ipcRenderer.send("window-close", "111111111111111");
};
// 缩小窗口
const toMin = () => {
  ipcRenderer.send("window-min", "111111111111111");
};
// 放大窗口
const toMax = () => {
  ipcRenderer.send("window-max", "111111111111111");
};
</script>

4.主进程监听渲染进程发送的指令，下面那部分就是监听的。

async function createWindow() {
  Menu.setApplicationMenu(null);
  // Create the browser window.
  const win = new BrowserWindow({
    width: 1000,
    height: 600,
    resizable: false,
    frame: false,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
    },
  });

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol("app");
    // Load the index.html when not in development
    win.loadURL("app://./index.html");
  }

  ipcMain.on("window-close", () => {
    win.destroy();
  });
  ipcMain.on("window-min", () => {
    win.minimize();
  });
  ipcMain.on("window-max", () => {
    if (win.isMaximized()) {
      win.unmaximize();
    } else {
      win.maximize();
    }
  });
}