一，,electron设置去除顶部导航栏和menu
1，electron项目
在创建BrowserWindow实例的main.js页面添加frame：false属性
2，electron-vue项目
在src/main/index.js文件下找到创建窗口的方法（createWindow），在mainWindow中添加frame:false属性
添加前：frame:true
添加后，frame:false
// 创建一个浏览器的窗口
const mainWindow = new BrowserWindow({
width: 900,
height: 670,
// 最小高度
minHeight: 500,
minWidth: 500,
show: false,
// 窗口大小是否可调整，false就是不可以调整
// resizable: false,
// 窗口初始化的位置x轴
x: 100,
// 窗口初始化位置y轴
y: 100,
// autoHideMenuBar: false,
// 去除顶部标题以及菜单栏
frame: false,
// 隐藏标题,会导致窗口无法移动
// titleBarStyle: 'hidden',
...(process.platform === 'linux' ? { icon } : {}),
webPreferences: {
preload: join(__dirname, '../preload/index.js'),
sandbox: false
// nodeIntegration: true, // 不加，渲染进程会报错
// contextIsolation: false // 为了安全性
// // enableRemoteModule: true // 不加，渲染进程会报错
}
})二：electron-vue设置一进页面全屏显示
解决前：fullscreen: false,
解决后：fullscreen: true,
三，解决electron设置可以拖动区域，模拟原来的顶部导航栏拖拽操作
1，设置了titleBarStyle: 'hidden'的弊端（隐藏标题（这种情况会导致窗口无法移动））
状态： 无标题，有：关闭、缩小、放大
解决办法1：（添加样式来解决）
1. 在渲染进程的dom中，添加样式：-webkit-app-region: drag;（会导致事件无法生效）
-webkit-app-region: drag;2.给不需要拖拽的元素，取消-webkit-app-region: no-drag;（为了解决，添加后，会导致点击等事件无法触发，不生效）（给不需要拖动的地方添加，加了之后这个区域就无法拖动了）
-webkit-app-region: no-drag;渲染进程添加样式来解决 在App.vue 中
<!-- 第一步 -->
<template>
<div class="app">
<router-view></router-view>
</div>
</template>
<style>
.app {
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
-webkit-app-region: drag;
}
</style>
<!-- 第二步在不需要拖动的地方： -->
<template>
<div class="Login">
xxxxxxx，这个区域内的内容是无法拖动的
</div>
</template>
<style>
.Login{
-webkit-app-region: no-drag;
}
</style>解决办法2（给主进程传参）
App.vue文件
<template>
<div class="app" @mousedown="mousedown">
<router-view></router-view>
</div>
</template>
<script setup lang="ts">
import Versions from './components/Versions.vue'
import { ref } from 'vue'
let isKeyDown = ref(false)
let dinatesX = ref(0)
let dinatesY = ref(0)
const ipcHandle = () => window.electron.ipcRenderer.send('ping')
const mousedown = (e) => {
isKeyDown.value = true
// 获取鼠标移入到窗口时的x坐标
dinatesX.value = e.x
// 获取鼠标移入到窗口时的y坐标
dinatesY.value = e.y
document.onmousemove = (ev) => {
console.log(ev,'ev')
// ev就是获取鼠标移入到窗口时相对于屏幕的x坐标y坐标
if (isKeyDown.value) {
const x = ev.screenX - dinatesX.value
const y = ev.screenY - dinatesY.value
//给主进程传入坐标
let data = {
appX: x,
appY: y
}
electron.ipcRenderer.invoke('custom-adsorption', data)
}
}
document.onmouseup = (ev) => {
isKeyDown.value = false
}
}
</script>
<style>
html,
body,
#app {
height: 100%;
width: 100%;
/* overflow: hidden; */
margin: 0;
padding: 0;
}
.app {
/* position: absolute;
left:0;
bottom: 0;
right: 0;
top:0;
-webkit-app-region: drag; */
background-color: aqua;
height: 100%;
width: 100%;
}
</style>
主流程的index.js文件
ipcMain.handle('custom-adsorption', (_, res) => {
mainWindow.setPosition(res.appX, res.appY)
})四：electron窗口去除自带导航栏后自定义窗口最小化，窗口全屏，恢复窗口，关闭窗口按钮操作
1,App.vue
<template>
<div>
<el-button @click="emit">退出程序</el-button>
<el-button @click="clone">关闭当前窗口</el-button>
<el-button @click="min">最小化</el-button>
<el-button @click="max">最大化</el-button>
</div>
<div class="app" @mousedown="mousedown">
<router-view></router-view>
</div>
</template>
const max = () =>{
electron.ipcRenderer.invoke('max')
}
const min = () =>{
electron.ipcRenderer.invoke('min')
}
const clone = () =>{
electron.ipcRenderer.invoke('clone')
}
const emit = () =>{
electron.ipcRenderer.invoke('emit')
}主进程
ipcMain.handle('clone', () => {
//关闭当前窗口
mainWindow.close()
})
ipcMain.handle('min', () => {
//最小化
mainWindow.minimize()
})
ipcMain.handle('max', () => {
//最大化
if (mainWindow.isMaximized()) {
//判断窗口是否最大化
mainWindow.restore() //将窗口恢复为之前的状态
} else {
mainWindow.maximize() //将窗口全屏
}
})
ipcMain.handle('emit', () => {
//退出程序
app.quit()
})
