一，,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.ydocument.onmousemove = (ev) => {console.log(ev,'ev')// ev就是获取鼠标移入到窗口时相对于屏幕的x坐标y坐标if (isKeyDown.value) {const x = ev.screenX - dinatesX.valueconst 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()})
