electron隐藏状态栏
1、设置了{frame:false}
或{titleBarStyle: 'hidden'}
都可以达到隐藏标题栏的效果。
但是若果不做处理,就不能进行拖动了。
- main.js
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
},
backgroundColor:'#ff0',
frame: false //隐藏标题栏
})
win.loadFile('index.html')
win.webContents.openDevTools()
}
app.on('ready',() => {
createWindow()
})
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
-webkit-app-region: drag
}
input {
-webkit-app-region: no-drag;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>你好</h2>
<input value="你好"/>
</body>
</html>
解释:这里给body添加
-webkit-app-region: drag
属性,整个窗口就能够拖动,但是会带来新的bug,input输入框不能选中输入文字,button按钮不能添加点击事件等。所以需要给这些按钮添加-webkit-app-region: no-drag;
属性,才能恢复正常。
方法二
结合windows自带的mousemove事件,还有electron的getPosition方法获取窗口当前位置,通过setPosition设置窗口位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* body{
-webkit-app-region: drag
}
input {
-webkit-app-region: no-drag;
}
*/
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>你好</h2>
<input value="你好"/>
</body>
<script>
function makeDraggable(element) {
element = document.querySelector(element);
let dragging = false;
let mouseX = 0;
let mouseY = 0;
element.addEventListener('mousedown', (e) => {
dragging = true;
const { pageX, pageY } = e;
mouseX = pageX;
mouseY = pageY;
});
window.addEventListener('mouseup', () => {
dragging = false;
});
window.addEventListener('mousemove', (e) => {
if (dragging) {
const { pageX, pageY } = e;
const win = require('electron').remote.getCurrentWindow();
const pos = win.getPosition();
pos[0] = pos[0] + pageX - mouseX;
pos[1] = pos[1] + pageY - mouseY;
win.setPosition(pos[0], pos[1], true);
}
});
}
makeDraggable('body')
</script>
</html>