一、先看效果图
二、主进程创建窗口
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"); --打开新窗口的路径地址 }