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
