使用electron實現百度網盤懸浮窗口功能的示例代碼

npm install storejs

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

<template>
 <div id="suspension">
 <div class="logo"></div>
 <div class="content_body">
 <div class="upload">拖拽上傳</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('mousedown', function (e) {
 switch (e.button) {
 case 0:
 biasX = e.x;
 biasY = e.y;
 document.addEventListener('mousemove', moveEvent);
 break;
 case 2:
 that.$electron.ipcRenderer.send('createSuspensionMenu');
 break;
 }
 });

 document.addEventListener('mouseup', function () {
 biasX = 0;
 biasY = 0;
 document.removeEventListener('mousemove', 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>

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¶m=7B2267726F757055696E223A3831343237303636392C2274696D655374616D70223A313533393531303138387D0A');
 }
 },
 {
 label: 'GitHub地址',
 click: () => {
 shell.openExternal('https://github.com/lihaotian0607/auth');
 }
 },
 {
 label: '退出軟件',
 click: () => {
 app.quit();
 }
 },
 ]);
 rightM.popup({});
});

function createSuspensionWindow() {
 win = new BrowserWindow({
 width: 107, //懸浮窗口的寬度 比實際DIV的寬度要多2px 因為有1px的邊框
 height: 27, //懸浮窗口的高度 比實際DIV的高度要多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();
 }
});

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