- 使用 vue init simulatedgreg/electron-vue my-project 创建项目
运行 npm run dev 报错
解决办法:
在项目的.electron-vue文件下的 webpack.renderer.config.js 和 webpack.web.config.js文件的 plugins里加
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
加入之后重新运行:npm run dev 就ok了。
2.拖拽
在需要拖拽的元素加上:
css: -webkit-app-region: drag;
取消拖拽:
css: -webkit-app-region: no-drag;
3. Home.vue 的代码
<template>
<div>
<div class="top_nav">
<button class="top_btn" :title="top_title" @click="onTopping"></button>
<button class="min_btn" title="最小化" @click="onMinimize"></button>
<button class="max_btn" :title="max_title" :style="{backgroundImage:'url('+ max_icon +')'}"
@click="onMaximize"></button>
<button class="close_btn" title="关闭" @click="onClose"></button>
</div>
你好
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
top_title:"置顶",
max_title: "最大化",
max_icon: require("../assets/max.png"),
}
},
mounted() {
//监听窗口变化
this.$electron.ipcRenderer.on('restoreMaximize', (event, data) => {
switch (data) {
case 'restore':
this.max_title = "最大化";
this.max_icon = require("../assets/max.png");
break;
case 'maximize':
this.max_title = "向下还原";
this.max_icon = require("../assets/reset_max.png");
break;
}
});
this.$electron.ipcRenderer.on('alwaysOnTop',(event,data)=>{
switch (data) {
case 'yes':
this.top_title = "取消置顶";
break;
case 'no':
this.top_title = "置顶";
break;
}
})
},
methods: {
//置顶功能
onTopping() {
this.$electron.ipcRenderer.send('window-top');
},
//最小化
onMinimize() {
this.$electron.ipcRenderer.send('window-min');
},
//最大化
onMaximize() {
this.$electron.ipcRenderer.send('window-max');
},
//关闭
onClose() {
this.$electron.ipcRenderer.send('window-close');
}
}
}
</script>
<style scoped lang="scss">
.top_nav {
height: 32px;
background: #fff;
-webkit-app-region: drag;
display: flex;
align-items: center;
justify-content: flex-end;
button {
border: none;
background: none;
-webkit-app-region: no-drag;
outline: none;
}
button:focus {
outline: none;
}
/*for IE*/
button::-moz-focus-inner {
border-color: transparent;
}
/*for mozilla*/
button:focus {
border: none;
}
.top_btn, .min_btn, .max_btn, .close_btn {
width: 45px;
height: 32px;
background-position: center;
background-repeat: no-repeat;
background-size: 40%;
}
.top_btn:hover,
.min_btn:hover,
.max_btn:hover {
cursor: pointer;
background-color: #e5e5e5;
}
.close_btn:hover {
background-image: url("../assets/hover_close.png");
cursor: pointer;
background-color: #f10707;
}
.top_btn {
background-image: url("../assets/topping.png");
}
.min_btn {
background-image: url("../assets/min.png");
}
.close_btn {
background-image: url("../assets/close.png");
}
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
4.ipcMain.js 的代码
const {ipcMain, BrowserWindow} = require('electron');
var mainWindow = BrowserWindow.getFocusedWindow();
//监听窗口变化 实现修改最大化和还原的图标
mainWindow.on('resize',()=>{
if (!mainWindow.isMaximized()){
BrowserWindow.getFocusedWindow().webContents.send('restoreMaximize','restore');
}else {
BrowserWindow.getFocusedWindow().webContents.send('restoreMaximize','maximize');
}
})
//置顶
ipcMain.on('window-top', () => {
if (mainWindow.isAlwaysOnTop()){
mainWindow.setAlwaysOnTop(false);
BrowserWindow.getFocusedWindow().webContents.send('alwaysOnTop','no');
}else {
mainWindow.setAlwaysOnTop(true);
BrowserWindow.getFocusedWindow().webContents.send('alwaysOnTop','yes');
}
});
//最小化
ipcMain.on('window-min', () => {
mainWindow.minimize();
});
//最大化
ipcMain.on('window-max', () => {
if (mainWindow.isMaximized()){
mainWindow.restore();
//主进程 个渲染进程 发送数据
BrowserWindow.getFocusedWindow().webContents.send('restoreMaximize','restore');
}else {
mainWindow.maximize();
//主进程 个渲染进程 发送数据
BrowserWindow.getFocusedWindow().webContents.send('restoreMaximize','maximize');
}
});
//关闭
ipcMain.on('window-close', () => {
mainWindow.close();
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
最终效果: