效果
版本資訊
"electron": "^11.0.0"
"vue": "^3.0.0"
代碼
實作邏輯
- 1、設定屬性實作頭部隱藏
- 2、vue中觸發事件，使用electron的ipcRenderer方法去發布事件，electron主執行緒中接收到事件，并呼叫electron內部的方法實作關閉，最小化等功能，
vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
nodeIntegration: true
}
}
};
background.js中，這里主要是添加frame: false，添加底部添加了注釋部分的代碼，關閉呼叫的是destroy方法，前面看到很多博客用的都是close，但是沒有效果看了electron的issues發現新版本只能用destory
import { app, protocol, BrowserWindow, ipcMain } from "electron";
import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
const isDevelopment = process.env.NODE_ENV !== "production";
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
{ scheme: "app", privileges: { secure: true, standard: true } }
]);
let win;
async function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 800,
height: 600,
frame: false, //實作頭部的隱藏
webPreferences: {
enableRemoteModule: true,
nodeIntegration: true
}
});
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
if (!process.env.IS_TEST) win.webContents.openDevTools();
} else {
createProtocol("app");
// Load the index.html when not in development
win.loadURL("app://./index.html");
}
}
// 實作自定義標題欄，最小化，最大化，關閉
ipcMain.on("window-min", () => win.minimize());
ipcMain.on("window-max", () => {
if (win.isMaximized()) {
win.unmaximize();
} else {
win.maximize();
}
});
ipcMain.on("window-close", () => {
win.destroy();
});
App.vue中
<template>
<div v-if="IS_ELECTRON" class="header">
<div class="left">xxxx應用</div>
<div class="right">
<span class="el-icon-minus" @click="minimizeWin"></span>
<span class="el-icon-full-screen" @click="maximizeWin"></span>
<span class="el-icon-close" @click="closeWin"></span>
</div>
</div>
<router-view />
</template>
<script>
import { ipcRenderer } from "electron";
import { reactive, toRefs } from "vue";
export default {
setup() {
const data = reactive({ IS_ELECTRON: process.env.IS_ELECTRON });
function minimizeWin() {
ipcRenderer.send("window-min");
}
function maximizeWin() {
ipcRenderer.send("window-max");
}
function closeWin() {
ipcRenderer.send("window-close");
}
return { minimizeWin, maximizeWin, closeWin, ...toRefs(data) };
}
};
</script>
<style lang="scss" scoped>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.header {
display: flex;
justify-content: space-between;
// 允許拖動應用
-webkit-app-region: drag;
span {
font-size: 20px;
margin-right: 20px;
//避免拖動屬性導致不能點擊
-webkit-app-region: no-drag;
}
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/259502.html
標籤：其他
上一篇：Flutter中對IOS專案進行真機除錯、專案打包、提交審核
下一篇：typora學習