一、先看效果图
二、主进程创建窗口
let mainWindow
const isDevelopment = process.env.NODE_ENV !== "production";
const path = require("path");
const winURL = process.env.NODE_ENV === 'development'
? `http://localhost:9080`
: `file://${__dirname}/index.html`
function createWindow () {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
width: 1000,
height: 690,
minWidth: 900,
minHeight: 400,
frame: false,
useContentSize: true,
resizable: true,
skipTaskbar: false,
transparent: false,
webPreferences: {
nodeIntegration: true,
nodeIntegrationInWorker: true,
webSecurity: false,
useContentSize: true,
navigateOnDragDrop: true,
devTools: true,
},
});
mainWindow.loadURL(winURL)
三、新创口的创建可分为父子窗口和单独窗口
1、父子窗口
通过使用 parent
选项,你可以创建子窗口:
const { BrowserWindow } = require('electron')
const top = new BrowserWindow()
const child = new BrowserWindow({ parent: top })
child.show()
top.show()
child
窗口将总是显示在 top
窗口的顶部
2、托盘菜单窗口
1)首现要创建托盘菜单窗口路由页面
Setting.vue
<template>
<div class='main'>
<el-row>
<el-col :span="12">
<div class="head_log">
<span class='title'>设置</span>
</div>
</el-col>
<el-col :span="12">
<div class="nav">
<button @click="handlebtn('min')"><i class='el-icon-minus'></i></button>
<button @click="handlebtn('close')" class="close"><i class='el-icon-close'></i></button>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
let { ipcRenderer, remote, shell } = require("electron");
export default {
name:'setting',
props:{},
data () {
return {
};
},
watch: {},
components: {},
computed: {},
beforeMount() {},
mounted() {},
methods: {
handlebtn(type){//关闭
ipcRenderer.send('window-setting',type)
}
},
}
</script>
<style lang="scss" scoped>
.main{
height:40px;
.el-row{
height:40px;
-webkit-app-region:drag;
.el-col-12{
height: 40px;
.head_log{
height: 40px;
padding-left: 20px;
text-align: left;
line-height: 40px;
float: left;
color:#999999;
font-size: 14px;
}
.nav{
position: absolute;
right: 0;
button{
background: none;
outline: none;
border: none;
font-size: 18px;
cursor: pointer;
padding: 9px 12px;
-webkit-app-region: no-drag;
}
button:hover{
color:white;
background: #cccccc;
}
.close:hover{
color:white;
background: red;
}
}
}
}
}
</style>
2)路由注册弹窗页面
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from "@/Pages/Home";
import Setting from '@/Pages/setting'
Vue.use(Router)
export default new Router({
routes: [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/setting",
name: "Setting",
component: Setting,
},
],
});
3)托盘菜单点击,创建打开新窗口
let { app, Menu, Tray, ipcMain, BrowserWindow,dialog } = require('electron')
const winURL =process.env.NODE_ENV === "development"
? `http://localhost:9080`
: `file://${__dirname}/index.html`;
let setting = null;
const menu = Menu.buildFromTemplate([
{
label: "设置",
click: function() {
openchild()
}, // 打开相应页面
},
{
label: "帮助",
click: function() {
},
},
{
label: "关于",
click: function() {
let pjson = require("../../package.json");
const options = {
type: "info",
title: `关于`,
message: `关于${pjson.name}\n当前版本 ${pjson.version}`,
buttons: [],
};
dialog.showMessageBox(options);
},
},
{
label: "退出",
click: function() {
app.quit();
},
},
]);
function openchild(){ --创建新窗口
//mainWindow.setMenu(null);
setting = new BrowserWindow({
width: 700,
height: 500,
frame: false,
useContentSize: false,
resizable: false,
skipTaskbar: true,
transparent: false,
webPreferences: {
nodeIntegration: true,
},
backgroundColor: "#F5F5F5",
});
setting.loadURL(winURL + "#/setting"); --打开新窗口的路径地址
}