简速做网站工作室,集宁做网站,广安seo优化,asp.net 制作网站开发一#xff0c;,electron设置去除顶部导航栏和menu
1#xff0c;electron项目 在创建BrowserWindow实例的main.js页面添加frame#xff1a;false属性
2#xff0c;electron-vue项目 在src/main/index.js文件下找到创建窗口的方法#xff08;createWindow#xff09;,electron设置去除顶部导航栏和menu
1electron项目 在创建BrowserWindow实例的main.js页面添加framefalse属性
2electron-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 中
!-- 第一步 --
templatediv classapprouter-view/router-view/div
/templatestyle.app {position: absolute;left: 0;bottom: 0;right: 0;top: 0;-webkit-app-region: drag;}
/style
!-- 第二步在不需要拖动的地方 --
templatediv classLoginxxxxxxx这个区域内的内容是无法拖动的/div
/template
style.Login{-webkit-app-region: no-drag;}
/style
解决办法2给主进程传参
App.vue文件
templatediv classapp mousedownmousedownrouter-view/router-view/div
/template
script setup langts
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
templatedivel-button clickemit退出程序/el-buttonel-button clickclone关闭当前窗口/el-buttonel-button clickmin最小化/el-buttonel-button clickmax最大化/el-button/divdiv classapp mousedownmousedownrouter-view/router-view/div
/templateconst 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()})
