electron 让无框窗口像原生窗口一样可调节大小
2017-10-18 本文已影响158人
竹杖芒鞋轻胜码
如果不想被系统的窗口影响界面，特别是Windows的窗口栏那么丑。。
所以用electron 创建一个无框窗口是非常有必要的。
如下图
来自Electron API Demos 示例.png
但是当自己使用的时候，发现了一个问题，就是当自己希望整个窗口除了控件之外的地方都能够拖拽移动时，设置<body style="-webkit-app-region:drag">,此时边缘是不能用鼠标对窗口大小进行调节的。
窗口不能拉动.gif
为了能让整个窗口像原生窗口一样，思路就是 ，给四边和四角的边缘添加一个 div , 并给之设置webkit-app-region:no-drag属性.
以顶边为例子,设置
HTML:
<div class="header">
<div class="left-drag"></div>
<div class="right-drag"></div>
</div>
CSS
.header{
position:absolute;
top:0;
width:100%;
height:4px;
-webkit-app-region:no-drag;
}
div.header
顶部的两个角:
.header .left-drag,
.header .right-drag{
position: absolute;
top: 0;
}
.left-drag,
.right-drag{
-webkit-app-region:no-drag;
height: 20px;
width: 50px;
}
.left-drag{
left:0;
}
.right-drag{
right:0;
}
left-drag
底边和两个角也一样处理，
最后效果如下:
窗口可拉动.gif
