myheader.vue
```
<template>
<div id="myHeader">
<div class="titlebtn">
<div class="min btn" @click="min">
―
</div>
<div class="max btn" @click="max">☐</div>
<div class="close btn" @click="close">✕</div>
</div>
<el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
<div>
<el-radio v-model="radio" label="1">缩小到托盘区</el-radio>
<br />
<el-radio v-model="radio" label="2">直接退出</el-radio>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="mini">
取 消
</el-button>
<el-button type="primary" size="mini" @click="closeOrHide">
确 定
</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import Vue from "vue";
import { Dialog, Radio, Button } from "element-ui";
Vue.use(Dialog);
Vue.use(Radio);
export default{
data(){
return{
dialogVisible: false,
radio: "1"
}
},
methods:{
min(){
this.$electron.ipcRenderer.send('window-min');
},
max(){
this.$electron.ipcRenderer.send('window-max');
},
// 开启弹框
close() {
this.dialogVisible = true;
},
// 判断是退出还是缩小到托盘区
closeOrHide() {
this.dialogVisible = false;
setTimeout(() => {
if (this.radio === "1") {
this.$electron.ipcRenderer.send("window-hide");
} else if (this.radio === "2") {
this.$electron.ipcRenderer.send("window-close");
}
}, 300);
}
}
}
</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;
.btn {
cursor: pointer;
transition: color 300ms;
&:hover {
color: #1989fa;
}
}
.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';
export default {
name: 'electronvuedemo',
components:{
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
```
//接收渲染进程广播的数据执行最小化 最大化 关闭的操作
// vue中通过 例如：this.$electron.ipcRenderer.send("window-hide");调用
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()
})
ipcMain.on("window-hide", () \=> {
mainWindow.hide();
});
```
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;
```
- electron-vue打包不同平台的安装文件
- Electron+Vue开发跨平台桌面应用
- electron-vue项目初始化process is not defined问题解决
- 出现 require is not defined 的问题
- Cannot read property 'app' of undefined
- electron-vue 隐藏顶部菜单 隐藏导航 、自定义导航
- electron程序显示在右下角托盘
- electron与vue通信
- electron-vue修改任务栏图标
- electron-vue文档1
- 打包错误
- 使用 electron 屏幕或摄像头录制并保存到本地
- electron-vue创建报错