electron-vue 隐藏顶部菜单 隐藏导航 、自定义导航
myheader.vue
<template> <div id="myHeader"> <div class="titlebtn"> <div class="min" @click="min"> <img src="../assets/min.png" alt=""></div> <div class="max"><button @click="max"> [] </button></div> <div class="close"><button @click="close"> X </button></div> </div> </div> </template> <script> export default{ data(){ return{ } },methods:{ min(){ this.$electron.ipcRenderer.send('window-min'); }, max(){ this.$electron.ipcRenderer.send('window-max'); }, close(){ this.$electron.ipcRenderer.send('window-close'); } } } </script> <style lang="scss"> #myHeader { width: 100%; height: 30px; line-height: 30px; background-color: rgb(198, 47, 47); -webkit-app-region: drag; } .titlebtn { position: relative; width: 200px; height: 30px; line-height: 30px; float: right; -webkit-app-region: no-drag; .min{ position: absolute; background: 'green'; right: 100px; width: 20px; img{ width: 100%; margin-top:6px; } } .max{ position: absolute; background: 'yellow'; right: 60px; width: 20px; } .close{ position: absolute; background:'black'; right:20px; width: 20px; } } </style>
app.vue
<template> <div id="app"> <MyHeader /> <div class="header"> <router-link to='home'>首页</router-link> <router-link to='news'>新闻</router-link> </div> <router-view></router-view> </div> </template> <script> import MyHeader from './components/MyHeader.vue'; export default { name: 'electronvuedemo', components:{ MyHeader:MyHeader } } </script> <style> /* CSS */ *{ margin:0px; padding: 0px; } .header{ height: 44px; line-height: 44px; text-align: center; /* background: #000; */ } .header a{ color: #666; } </style>
main/icpMain.js
//接收渲染进程广播的数据执行最小化 最大化 关闭的操作 var {ipcMain,BrowserWindow} =require('electron'); //获取当前的窗口对象 BrowserWindow.getFocusedWindow(); var mainWindow= BrowserWindow.getFocusedWindow(); ipcMain.on('window-min',()=>{ console.log('window-min') mainWindow.minimize() }) ipcMain.on('window-max',()=>{ if(mainWindow.isMaximized()){ mainWindow.restore(); }else{ mainWindow.maximize() } }) ipcMain.on('window-close',()=>{ mainWindow.close() })
main/index,js
import { app, BrowserWindow } from 'electron' /** * Set `__static` path to static files in production * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html */ if (process.env.NODE_ENV !== 'development') { global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\') } let mainWindow const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080` : `file://${__dirname}/index.html` function createWindow () { /** * Initial window options */ mainWindow = new BrowserWindow({ height: 563, useContentSize: true, width: 1000, frame: false //去掉最顶部的导航 以及 最大化 最小化 关闭按钮 }) mainWindow.loadURL(winURL) mainWindow.on('closed', () => { mainWindow = null }) //去掉顶部菜单 mainWindow.setMenu(null); //引入ipcMain require('./icpMain.js'); } app.on('ready', createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (mainWindow === null) { createWindow() } }) /** * Auto Updater * * Uncomment the following code below and install `electron-updater` to * support auto updating. Code Signing with a valid certificate is required. * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html#auto-updating */ /* import { autoUpdater } from 'electron-updater' autoUpdater.on('update-downloaded', () => { autoUpdater.quitAndInstall() }) app.on('ready', () => { if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdates() }) */
electron-vue 自定义导航可拖拽
//可拖拽的 css: -webkit-app-region: drag; //不可拖拽的 css: -webkit-app-region: no-drag;
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!
posted on 2021-02-17 21:43 LoaderMan 阅读(2776) 评论(0) 编辑 收藏 举报