美文网首页ElectronElectron官方文档(v1.6.1)中文翻译
electron 让无框窗口像原生窗口一样可调节大小

electron 让无框窗口像原生窗口一样可调节大小

作者: 竹杖芒鞋轻胜码 | 来源:发表于2017-10-18 12:00 被阅读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

    相关文章

      网友评论

        本文标题:electron 让无框窗口像原生窗口一样可调节大小

        本文链接:https://www.haomeiwen.com/subject/xdesuxtx.html