如果不想被系統(tǒng)的窗口影響界面七婴，特別是Windows的窗口欄那么丑。彩郊。
所以用electron 創(chuàng)建一個(gè)無(wú)框窗口是非常有必要的前弯。
如下圖
來(lái)自Electron API Demos 示例.png
但是當(dāng)自己使用的時(shí)候，發(fā)現(xiàn)了一個(gè)問(wèn)題秫逝，就是當(dāng)自己希望整個(gè)窗口除了控件之外的地方都能夠拖拽移動(dòng)時(shí)恕出，設(shè)置<body style="-webkit-app-region:drag">,此時(shí)邊緣是不能用鼠標(biāo)對(duì)窗口大小進(jìn)行調(diào)節(jié)的。
窗口不能拉動(dòng).gif
為了能讓整個(gè)窗口像原生窗口一樣违帆，思路就是 浙巫，給四邊和四角的邊緣添加一個(gè) div , 并給之設(shè)置webkit-app-region:no-drag屬性.
以頂邊為例子,設(shè)置
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
頂部的兩個(gè)角:
.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
底邊和兩個(gè)角也一樣處理，
最后效果如下:
窗口可拉動(dòng).gif
