Electron-vue 开启多窗口

https://www.jianshu.com/p/438e852fa08f
原始：第一种方式
一、index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>开启新的窗口</title>
</head>

<style>
    body {
        padding: 0;
        margin: 0;
        background-color: #FCF6E5;
        text-align: center;
    }
    button {
        height: 80px;
        font-size: 36px;
        border-radius: 6px;
        background-color: #ffffff;
        margin-top: 20px;
    }

    #bilibili{
        color: #E5697A;
    }
    #youtube{
        color: #A84631;
    }
</style>

<body>
    <button id="bilibili">打开B站</button>
    <button id="youtube">打开youtube</button>
    <button id="local-list">打开本地文件local-list.html</button>
</body>


<script>
    const path = require("path");
    const electron = require("electron");

    let BrowserWindow = electron.remote.BrowserWindow;


    let bilibiliWindow = null;
    let youtubeWindow = null;
    let localListWindow = null;

    document.getElementById("bilibili").onclick = function(){

        bilibiliWindow = new BrowserWindow ({width: 1000, height:800})

        bilibiliWindow.loadURL("https://bilibili.com/");

        bilibiliWindow.on("close", function(){
            bilibiliWindow = null;

        })
    }

    document.getElementById("youtube").onclick = function(){

        youtubeWindow = new BrowserWindow ({width: 1000, height:800})

        youtubeWindow.loadURL("https://youtube.com/");

        youtubeWindow.on("close", function(){
            youtubeWindow = null;
        })
    }

    document.getElementById("local-list").onclick = function(){

        localListWindow = new BrowserWindow ({width: 1000, height:800})
/        //local-list.html是新开窗口的渲染进程
        localListWindow.loadURL(`file://${__dirname}/local-list.html`);
        //local-list.html是新开Vue窗口的渲染进程
        //localListWindow.loadURL(path.join('file:',__dirname,'local-list.html')); 
        localListWindow.on("close", function(){
            localListWindow = null;
        })
    }
</script>

</html>

//第二种

新建一个组件Calendar.vue

<template>
  <div>
    <el-calendar v-model="value"></el-calendar>
  </div>
</template>

<script>
export default {
  name: 'Calendar',
  data () {
    return {
      value: new Date()
    }
  }
}
</script>

路由中router.js 添加

{
    path: '/Calendar',
    name: 'Calendar',
    component: Calendar
},

主进程main.js 添加
// 定义calendar窗体

let calendarWin;
// 创建calendar窗口方法
function openCalendarWindow () {
    calendarWin = new BrowserWindow({
        width: 400,
        height: 550,
        parent: mainWindow, // win是主窗口
        webPreferences: {
            nodeIntegration: true
        }
    })
    calendarWin.loadURL(winURL + '#/suspension');
    calendarWin.on('closed', () => { calendarWin = null })
}
ipcMain.on('openCalendarWindow', e =>
    openCalendarWindow()
);


//关闭当前多窗口
ipcMain.on('closeCalendarWindow', e =>
    calendarWin.close()
);
//最小化当前多窗口
ipcMain.on('minimizeCalendarWindow', e =>
    calendarWin.minimize()
);

//渲染进程中使用
const ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.send('openCalendarWindow');//打开
ipcRenderer.send('minimizeCalendarWindow');//最小化
ipcRenderer.send('closeCalendarWindow');//关闭

+用electron仿qq首页
https://segmentfault.com/a/1190000017022959

Electron-vue 开启多窗口

猜你喜欢