1. vue文件内 绑定创建 新建窗口 的 事件
 @click="openNewWindow" // 元素上绑定
  1. 使用ipcRenderer 通知主进程 创建新窗口,新窗口创建 请使用 主进程创建,不要在vue文件内创建。利于主进程对窗口的控制。
import { ipcRenderer } from 'electron'
openNewWindow(){
    ipcRenderer.send('newwindow')
},
  1. ipcMain 添加 新建窗口事件。请在 createWindow函数外,定义newWin变量。用于判断窗口是否已存在,存在则聚焦。
    窗口设置 请查看官方文档 中 BrowserWindow 的介绍。
    loadURL(winURL + “#/路由地址”) router默认采用 hash模式,/#/路由地址 会导致 新建窗口空白
const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080`
  : `file://${__dirname}/index.html`
// http://localhost:9080 可根据自己项目运行端口配置

// createWindow 函数中
	ipcMain.on('newwindow',function(){
    if(newWin){
      newWin.focus() // 存在 则聚焦
      return
    }
    newWin = new BrowserWindow({
      width:900,
      height:620,
      minWidth:900,
      minHeight:620,
      frame:true,//是否显示边缘框
      fullscreen:false, //是否全屏显示
      title:"项目名",
      autoHideMenuBar:true
    })
    newWin.loadURL(winURL+'#/路由地址')  // 此处写 你要打开的路由地址
    newWin.on('close',()=>{
      newWin=null
    })
  })
  1. 主进程 窗口关闭时,请把子窗口也关闭。
ipcMain.on('window-close',function (){
    mainWindow.close();
    if(newWin){
      newWin.close();
    }
  })

这里 只写了 部分核心代码,如有疑问,请私信。

Logo

前往低代码交流专区

更多推荐