第十四章:Electron-Vue 隐藏顶部菜单 隐藏关闭按钮、自定义关闭 最大化 最小化按钮
electron-vue 中隐藏顶部菜单//隐藏顶部菜单mainWindow.setMenu(null);隐藏关闭 最大化 最小化按钮mainWindow = new BrowserWindow({height: 563,useContentSize: true,width: 1000,frame: false /*去掉顶部导航 去掉关闭按钮 最大化最小化按钮*/})自定义关闭 最大化 最小化按钮
·
electron-vue 中隐藏顶部菜单
//隐藏顶部菜单
mainWindow.setMenu(null);
隐藏关闭 最大化 最小化按钮
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000,
frame: false /*去掉顶部导航 去掉关闭按钮 最大化最小化按钮*/
})
自定义关闭 最大化 最小化按钮
- 自定义导航栏
<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">
<img src="@/assets/max.png" alt />
</button>
</div>
<div class="close">
<button @click="close">
<img src="@/assets/close.png" alt />
</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: 50px;
line-height: 50px;
//可以拖拽
-webkit-app-region: drag;
}
.titlebtn {
position: relative;
width: 200px;
height: 50px;
line-height: 50px;
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;
img {
width: 100%;
margin-top: 6px;
}
}
.close {
position: absolute;
background: "black";
right: 20px;
width: 20px;
img {
width: 100%;
margin-top: 6px;
}
}
}
</style>
- 在App.vue中引用
<template>
<div id="app">
<MyHeader />
<router-view></router-view>
</div>
</template>
<script>
import MyHeader from "@/components/MyHeader.vue";
export default {
name: "electronvuewdemo",
data() {
return {};
},
components: {
MyHeader,
},
};
</script>
<style lang="scss">
* {
margin: 0px;
padding: 0px;
}
</style>
- 主进程接收广播
import { ipcMain, BrowserWindow } from 'electron'
//窗口设置
const mainWindow = BrowserWindow.getFocusedWindow()
ipcMain.on('window-min', function () {
mainWindow.minimize();
})
//登录窗口最大化
ipcMain.on('window-max', function () {
if (mainWindow.isMaximized()) {
mainWindow.restore();
} else {
mainWindow.maximize();
}
})
ipcMain.on('window-close', function () {
mainWindow.close();
})
- 可拖拽的 css
-webkit-app-region: drag;
- 不可拖拽的 css
-webkit-app-region: no-drag
完成
更多推荐
已为社区贡献19条内容
所有评论(0)