Electron开发实战之记帐软件4——无边框、窗口关闭、最大最小化、隐藏右键菜单

代码仓库： https://github.com/hilanmiao/LanMiaoDesktop

建立无边框窗体

如图：在src-main-index.js中添加BrowserWindow参数，frame: false 就是设置无边框窗体，transparent: true 是设置透明，这俩个须要配合使用。

去除丑陋的滚动条

窗体默认是带着滚动条的，比较丑陋，尤为是设置了无边框窗体以后，十分违和，因此咱们手动修改下。

如图：在src-renderer-App.vue中添加以下样式。我不须要滚动条带颜色，因此注释了部分代码，你们能够本身解开看一下效果，有须要就加上。

html {
/* 禁用html的滚动条，由于用的无框架窗口，默认就会有一个滚动条，因此去掉 */
overflow-y: hidden;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 2px; /*滚动条宽度*/
/*height: 2px;  !*滚动条高度*!*/
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
/*border-radius: 10px;  !*滚动条的背景区域的圆角*!*/
/*background-color: red;!*滚动条的背景颜色*!*/
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 99px; /*滚动条的圆角*/
/*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);*/
/*background-color: green;  !*滚动条的背景颜色*!*/
}

自定义最大最小关闭按钮

由于是无边框窗口，因此原先的导航栏都没有了，须要咱们自定义这些按钮。UI我就不具体介绍了，你们本身看一下就好，咱们只讲效果实现。

自定义按钮咱们是放在了src-renderer-layout-layout文件中的v-toolbar 组件中。 由于标题须要须要拖拽，因此咱们给它加上样式

style="-webkit-app-region: drag;"

但同时按钮，文字之类的不该该被拖拽，因此咱们给这些元素全都加上样式

style="-webkit-app-region: no-drag"

可是设置了drag以后，能够看到就不能经过鼠标进行大小缩放了，边框上不会出现缩放箭头，因此须要处理下，咱们再也不对整个toolbar进行drag设置，而是仅仅设置在几个须要拖动的区域，可是不能设置高度为100%，不然仍是不显示缩放箭头，因此我设置了v-spacer的高度为90%。

核心代码以下，代码比较简单，也不用ipc通知mainWindow了，直接remote模块作的了。有个坑，就是browserWindow.isMaximized()这个判断并非很好使，不信你能够本身试一下，和你预期有差异。我这里只能用页面判断了，但也不是特别好使，特别是开发过程当中热重载的时候。有解决方案的同志能够回复下。

winControl(action) {
    const browserWindow = remote.getCurrentWindow();
    switch (action) {
        case 'minimize':
            browserWindow.minimize()
            break;
        case 'maximize':
            if (this.isMaximized) {
                // if (browserWindow.isMaximized()) {
                browserWindow.unmaximize()
            } else {
                browserWindow.maximize()
            }
            // this.isMaximized = browserWindow.isMaximized()
            this.isMaximized = !this.isMaximized
            break;
        case 'close':
            browserWindow.close()
            break;
        default:
            break;
    }
}

隐藏右键菜单

双击顶部的工具栏，咱们能够看到窗口能最大化，可是这样影响咱们页面的最大化判断，因此须要去掉它，并且右键也能显示出原始窗体菜单，并很差看。

咨询了一些大佬，貌似windows无解？有解决方案的能够回复下

其实官方也有必定的说明。

网络上其余的解决方案我搜到两个，一是监控鼠标移动，这个方案会出现闪烁问题，不推荐。另外一个是使用electron-drag，不过须要rebuild你的代码，并且也有一些限制，怪麻烦的，就算了。

最终代码以下，虽然也有瑕疵，不过总比之前的好点了。

// if (this.isMaximized) {
if (browserWindow.isMaximized()) {
    browserWindow.unmaximize()
} else {
    if (this.isMaximized) {
        browserWindow.unmaximize()
    } else {
        browserWindow.maximize()
    }
}
// this.isMaximized = browserWindow.isMaximized()
this.isMaximized = !this.isMaximized