How to use electron to realize the floating window of network disk?

The content of this article is about how to use electron to realize the floating window of the network disk? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Related dependencies

Use vuex vue vue-route storeJs

storeJs is used to persist vuex state

exhibit

Introduction

I did not use electron’s built-in -webkit-app-region: drag because there are many problems with using it.
For example, events cannot be used with the right button and hand shapes cannot be used, etc. !

Installation

There are no screenshots during installation, so please refer to other articles
storeJs installation

npm install storejs

Ready to write Code

Configuration routing file

export default new Router({
    routes: [
        {path: '/', name: 'home', component: ()=> import('@/view//home')},
        {path: '/suspension', name: 'suspension', component: ()=> import('@/view/components/suspension')}
    ]
})

Write floating window page

Page path/src/renderer/view/components/suspension.vue

<template>
    <div>
        <div></div>
        <div>
            <div>拖拽上传</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "suspension",
        mounted() {
            let win = this.$electron.remote.getCurrentWindow();
            let biasX = 0;
            let biasY = 0;
            let that = this;
            document.addEventListener(&#39;mousedown&#39;, function (e) {
                switch (e.button) {
                    case 0:
                        biasX = e.x;
                        biasY = e.y;
                        document.addEventListener(&#39;mousemove&#39;, moveEvent);
                        break;
                    case 2:
                        that.$electron.ipcRenderer.send(&#39;createSuspensionMenu&#39;);
                        break;
                }
            });

            document.addEventListener(&#39;mouseup&#39;, function () {
                biasX = 0;
                biasY = 0;
                document.removeEventListener(&#39;mousemove&#39;, moveEvent)
            });

            function moveEvent(e) {
                win.setPosition(e.screenX - biasX, e.screenY - biasY)
            }
        }
    }
</script>

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .upload {
        height: 25px;
        line-height: 25px;
        font-size: 12px;
        text-align: center;
        color: #74A1FA;
    }

    .logo {
        width: 40px;
        background: #5B9BFE url("../../assets/img/logo@2x.png") no-repeat 2px 3px;
        background-size: 80%;
    }

    .content_body {
        background-color: #EEF4FE;
        width: 100%;
    }

    #suspension {
        -webkit-user-select: none;
        cursor: pointer;
        overflow: hidden;
    }

    #suspension {
        cursor: pointer !important;
        height: 25px;
        border-radius: 4px;
        display: flex;
        border: 1px solid #3388FE;
    }
</style>

The main process creates a floating window page code

Path: /src/main/window.js

import {BrowserWindow, ipcMain, screen, Menu, shell, app, webContents} from 'electron'

var win = null;
const window = BrowserWindow.fromWebContents(webContents.getFocusedWebContents());
const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080/#/suspension` : `file://${__dirname}/index.html/#/suspension`;
ipcMain.on('showSuspensionWindow', () => {
    if (win) {
        if (win.isVisible()) {
            createSuspensionWindow();
        } else {
            win.showInactive();
        }
    } else {
        createSuspensionWindow();
    }

});

ipcMain.on('createSuspensionMenu', (e) => {
    const rightM = Menu.buildFromTemplate([
        {label: '开始全部任务', enabled: false},
        {label: '暂停全部任务', enabled: false},
        {label: '本次传输完自动关机'},
        {type: 'separator'},
        {
            label: '隐藏悬浮窗',
            click: () => {
                window.webContents.send('hideSuspension', false);
                win.hide()
            }
        },
        {type: 'separator'},
        {
            label: '加入qq群',
            click: () => {
                shell.openExternal('tencent://groupwpa/?subcmd=all&param=7B2267726F757055696E223A3831343237303636392C2274696D655374616D70223A313533393531303138387D0A');
            }
        },
        {
            label: 'GitHub地址',
            click: () => {
                shell.openExternal('https://github.com/lihaotian0607/auth');
            }
        },
        {
            label: '退出软件',
            click: () => {
                app.quit();
            }
        },
    ]);
    rightM.popup({});
});

function createSuspensionWindow() {
    win = new BrowserWindow({
        width: 107, //悬浮窗口的宽度 比实际p的宽度要多2px 因为有1px的边框
        height: 27, //悬浮窗口的高度 比实际p的高度要多2px 因为有1px的边框
        type: 'toolbar',    //创建的窗口类型为工具栏窗口
        frame: false,   //要创建无边框窗口
        resizable: false, //禁止窗口大小缩放
        show: false,    //先不让窗口显示
        webPreferences: {
            devTools: false //关闭调试工具
        },
        transparent: true,  //设置透明
        alwaysOnTop: true,  //窗口是否总是显示在其他窗口之前
    });
    const size = screen.getPrimaryDisplay().workAreaSize;   //获取显示器的宽高
    const winSize = win.getSize();  //获取窗口宽高

    //设置窗口的位置 注意x轴要桌面的宽度 - 窗口的宽度
    win.setPosition(size.width - winSize[0], 100);
    win.loadURL(winURL);

    win.once('ready-to-show', () => {
        win.show()
    });

    win.on('close', () => {
        win = null;
    })
}

ipcMain.on('hideSuspensionWindow', () => {
    if (win) {
        win.hide();
    }
});

store file

Path: /src/renderer/store/modules/suspension.js

import storejs from 'storejs'

const state = {
    show: storejs.get('showSuspension')
};

const actions = {
    showSuspension: function ({state, commit}) {
        let status = true;
        storejs.set('showSuspension', status);
        state.show = status;
    },

    hideSuspension: function ({state, commit}) {
        let status = false;
        storejs.set('showSuspension', status);
        state.show = status;
    },
};

export default ({
    state,
    actions
});

Copyright Note

The Baidu icons and UI used in it are for learning use, please do not For commercial use!

Legacy issues

Restarting the software after closing will cause the position of the floating window to be reset. I also tried to use store.js in the main process but it didn't work. Use!
If you want to solve this problem, you can save the last dragged coordinates to storejs in the rendering process.
Bring the coordinates in when the rendering process sends an asynchronous message to the main process. You can also use nedb in the main process. Store coordinates in!

github address

Use electron to make Baidu network disk client: https://github.com/lihaotian0...
Use electron Create Baidu Netdisk floating window: https://github.com/lihaotian0...

The above is the detailed content of How to use electron to realize the floating window of network disk?. For more information, please follow other related articles on the PHP Chinese website!