electron自定义无边框带有阴影的窗口（如上图），在开发过程中遇到了两个难点：

1. 如何给无边框添加阴影

2. 如何来实现自定义的标题栏（最大化，最小化，关闭，拖动，双击）

3. 设置了transparent:true ,isMaximized()始终返回false

下面记录一下解决方案：

let win = new BrowserWindow({
            width:440,
            height:450,
            frame: false,
            transparent: true,
            webPreferences: {
                devTools:false,
                nodeIntegration: true,
                webviewTag: true
            }
        })

    <div class="content">
        <custom-header></custom-header>
        <div class="config-page">
            <ul class="config-page-tab">
                <li @click="toggle(item)" v-for="(item,index) in configPageTab" :class="item.component==currentComponent?'active':''">
                    {{item.text}}
                </li>
            </ul>
            <div class="config-page-content">
                <general-config v-show="currentComponent=='GeneralConfig'"></general-config>
                <notice-config v-show="currentComponent=='NoticeConfig'"></notice-config>
                <software-update  v-show="currentComponent=='SoftwareUpdate'"></software-update>
            </div>

        </div>
    </div>

  html,body{
	padding:0;
    background: rgba(0, 0, 0, 0);
  }
  .content{
        position: absolute;
        left: 4px;
        right: 4px;
        top:4px;
        bottom: 4px;
        background: #fff;
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.23);
    }

以上的代码可以创建一个无边框的窗户带有阴影的窗口。下面再说一下如何添加标题栏

<div class="header-content">
    <i class="el-icon-refresh" v-if="hasRefresh" @click="refresh" title="刷新"></i>
       <i class="iconfont icon-zuixiaohua" title="最小化" @click="winMin"></i>
       <i class="iconfont icon-zuidahua" title="还原" v-if="isMax" @click="winMax"></i>
       <i class="iconfont icon-common_icon_large"  v-if="!isMax" title="最大化" @click="winMax"></i>
       <i class="iconfont icon-common_icon_close" title="关闭" @click="winClose"></i>
 </div>

.header-content{
        background: #fff;
        height: 35px;
        border-bottom: 1px solid #ccc;
        -webkit-app-region: drag;
        cursor: pointer;
        position: relative;
    }

            winMin(){
                let win = remote.getCurrentWindow();
                win.minimize();
            },
            winMax(){
                let win = remote.getCurrentWindow();
                if(win.isMaximized()){
                    win.unmaximize();
                    this.isMax = false;
                    document.querySelector('.content').style.left='4px'
                    document.querySelector('.content').style.top='4px'
                    document.querySelector('.content').style.bottom='4px'
                    document.querySelector('.content').style.right='4px'
                    document.querySelector('.content').style.height='calc(100% - 8px)'
                }else{
                    win.maximize()
                    this.isMax = true;
                    document.querySelector('.content').style.left='0px'
                    document.querySelector('.content').style.top='0px'
                    document.querySelector('.content').style.bottom='0px'
                    document.querySelector('.content').style.right='0px'
                    document.querySelector('.content').style.height='100%'
                }
            },
            winClose(){
                let win = remote.getCurrentWindow();
                win.hide();
            }

-webkit-app-region: drag 可以设置标题栏拖拽，双击（非常好用）

如上的两种方式可以实现想要的结果。但是在这个过程中有个bug。因为设置了transparent：true,isMaximized()始终返回的是false。所以最大化和最小化的时候就非常不准确，如果把transparent改成false。一切就恢复正常了，但是这时候阴影效果又失效了，苦苦的陷入挣扎当中。

经过查阅文档发现这是electron一直有的一个bug,最终发现有个包完美解决这个问题

npm install --save electron-frameless-window-plugin

// main.js
const { app } = require('electron')
const { plugin } = require('electron-frameless-window-plugin')

app.on('ready', () => {
  ...
})

plugin({
  setGlobal: true
}) // apply to each window