框架参考:https://github.com/niuyueyang/electron
- 创建无边框
//src/main/index.js
//在 new BrowserWindow中,设置frame:false
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000,
frame: false,
})
- 设置公共最大,最小,关闭组件
//在components文件夹下面,新建公共组件common.vue
<template>
<div>
<section style="-webkit-app-region: no-drag">
<button type="button" id="maxbt" @click="max">最大</button>
<button type="button" id="minbt" @click="min">最小</button>
<button type="button" id="closebt" @click="closes">关闭</button>
</section>
</div>
</template>
<script>
var ipc = require('electron').ipcRenderer;
export default {
name: "common",
methods:{
max(){
ipc.send('window-max');
},
min(){
ipc.send('window-min');
},
closes(){
ipc.send('window-close');
}
}
}
</script>
//src/main/index.js
const electron = require('electron')
const ipc = electron.ipcMain
//登录窗口最小化
ipc.on('window-min',function(){
mainWindow.minimize();
})
//登录窗口最大化
ipc.on('window-max',function(){
if(mainWindow.isMaximized()){
mainWindow.restore();
}else{
mainWindow.maximize();
}
})
ipc.on('window-close',function(){
mainWindow.close();
})
- 设置icon
//src/main/index.js
var ico = path.join(__dirname, 'img', 'logo.png');
mainWindow = new BrowserWindow({
width: 1024,
height: 640,
transparent: false,
frame: true,
icon: ico, //图标
resizable : true //固定大小
});