相關依賴

裡面使用了vuex vue vue-route storeJs

storeJs 用來持久化vuex狀態

展示
相關依賴

裡面使用了vuex vue vue-route storeJs

storeJs 用來持久化vuex狀態

展示

介紹說明

沒有使用electron內建的-webkit-app-region: drag 因為使用他那個有很多問題

比如事件無法使用 右鍵無法使用 以及不能使用手型等!

安裝

安裝的時候沒有截圖 所以就參考下我其他的文章吧

storeJs 安裝

npm install storejs
 

準備寫程式碼
配置路由檔案

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

寫懸浮窗頁面

頁面路徑 /src/renderer/view/components/suspension.vue

<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/
 
[email protected]") 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>
//前端全棧學習交流圈：866109386
//面向1-3經驗年前端開發人員
//幫助突破技術瓶頸，提升思維能力

 

主程序建立懸浮窗頁面程式碼

路徑: /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¶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();
  }
});

store檔案

路徑: /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
});

遺留問題

• 在軟體關閉之後重啟會導致懸浮視窗的位置重置 也曾嘗試在主程序中使用store.js 但是不能用!
• 如果想解決這個問題 可以在渲染程序中將拖動的最後座標儲存到storejs中
• 在渲染程序給主程序傳送非同步訊息的時候將座標攜帶進去 也可以使用nedb在主程序中儲存座標!