Electron develops actual accounting software 4 - borderless, window close, maximize and minimize, hide right-click menu

Code repository: https://github.com/hilanmiao/LanMiaoDesktop

Create a borderless form

As shown in the figure: Add the BrowserWindow parameter in src-main-index.js, frame: false is to set the borderless window, transparent: true is to set the transparency, these two need to be used together.

remove ugly scrollbars

The form has a scroll bar by default, which is ugly, especially after setting the borderless form, it is very inconsistent, so we modify it manually.

As shown in the figure: Add the following style to src-renderer-App.vue. I don't need the color of the scroll bar, so I commented out some of the code, you can unpack it yourself to see the effect, and add it if you need it.

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;  !*滚动条的背景颜色*!*/
}

Custom max min close button

Because it is a borderless window, the original navigation bar is gone, and we need to customize these buttons. I won't introduce the UI in detail, just take a look at it for yourself, we only talk about the effect realization.

The custom button is placed in the v-toolbar component in the src-renderer-layout-layout file. Because the title needs to be dragged and dropped, we add styles to it

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

But at the same time buttons, text, etc. should not be dragged, so we add styles to all these elements

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

But after setting the drag, you can see that you can't zoom in and out with the mouse, and there will be no zoom arrows on the border, so we need to deal with it. The moving area, but the height cannot be set to 100% , otherwise the zoom arrow will not be displayed, so I set the height of the v-spacer to 90% .

The core code is as follows, the code is relatively simple, and there is no need for ipc to notify the mainWindow, and the remote module does it directly. There is a pit, that is, browserWindow.isMaximized()this judgment is not very easy to use, if you don’t believe it, you can try it yourself, it is different from your expectation. I can only use the page to judge here, but it is not particularly easy to use, especially when it is hot reloaded during the development process. Comrades who have a solution can reply.

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;
    }
}

hide context menu

Double-click the toolbar at the top, we can see that the window can be maximized, but this affects the maximized judgment of our page, so we need to remove it, and the right-click can also display the original form menu, which is not good-looking.

I consulted some big guys, it seems that Windows has no solution? Reply if you have a solution

In fact, there are some official explanations.

I found two other solutions on the Internet. One is to monitor mouse movement. This solution will have flickering problems and is not recommended. The other is to use electron-drag, but you need to rebuild your code, and there are some restrictions, which is troublesome, forget it.

The final code is as follows, although there are flaws, but it is better than before.

// 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

{{o.name}}

{{m.name}}